How to emulate suggested Google greyed-out text in input element?

Question

I would like to know how to do something like this in CSS:

How can I change the color of the text by half, as on the <input> ? I already did View Source, but it's hard to understand.

Answer 1

Google uses two divs that are absolutely located on top of the input field. The first div contains the word stackoverflow, and the text is light gray. The second dvi contains "stacko" and the text is black.

If you check the source, find divs with class = "gsfi".

Answer 2

First of all, study the implementation of autofill. This should give you another element [under the one the user enters; perhaps another div] for styling.

Answer 3

it's not just a CSS thing, you need JS too.

Take a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm

Now you can use CSS to style the text in this input so that the gray text comes out.

like this:

 ::selection { color: white; background-color: red; } ::-moz-selection { color: white; background-color: red; }