How to style differently two parts of text in the same input type = text

Question

I would like to know how the style differently consists of two parts of the text in the same input type = text, like Google. When you enter a couple of characters in the Google search box, they are displayed in plain black, but they are then prompted to complete in gray. So, we have two parts with different font properties in the same input field.

Answer 1

The text input is monochrome - there is no way around this. An effect like this can only be achieved with Javascript cheating.

Google div , . div , , . , . .

, , ... . , jQuery.

Answer 2

Google , ? , , . , , . , div - , .

Answer 3

Google uses two text fields directly above each other. They have different text colors, and the top is transparent. Look at it using Firebug to find out how it works.