Make part of input[text] grey?

Question

You know how google instant, when they provide suggestions, the bit of the search field that they suggested turns grey, but the bit you typed is always black. Well I want to achieve the same effect with a similar system. How would I go about this?

Thanks, Fela

Answer 1

You will need 2 textboxes positioned on top of each other. Make the textbox on top have a transparent background (these will be the selectable textbox). Then set the color of the textbox behind to grey (this will be the textbox displaying the suggestion).

Answer 2

You don't, If you look closely to the Google Instant, you'll see that they have a element positioned exactly where the inputbox is. So to make it simple: Just position a div where your inputfield is. Then like so:

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</div>

Answer 3

You can start with a grey background-image and adjusting its background-position property