Make part of input[text] grey?

问题:

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

回答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).

回答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>

回答3:

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