text input with other html elements as child, similar to Google+/Facebook's textbox

I want to c开发者_开发知识库reate a custom control that have the same behavior as what Google+ and Facebook's textbox have. The one that looks like it have child html elemens.

Please look at the following images:

---

You would need to position the elements using css. Wrap the input and the other element which you want inside the input inside an element, set its position:relative;, then define the element you want inside the input with position:absolute and set its top and left properties to 0 or some other value which fits your purpose.

example: http://jsfiddle.net/niklasvh/eZAU6/

---

Another answer for the community: If you inspect such "text input" via Google Chrome "Inspect Element" feature, you will see that it's not actually an input element: it is a DIV element with a child (and borderless) input element with same bg color. When the div element gets the focus, it transfers it to the inner (and borderless) input so you can write something. When you pick an element, a new entry is created and inserted in the div BEFORE the inner input element.