How does faded text effect on Google search work?

Question

While searching on Google, the autocomplete results show up below, just like many other sites.

But apart from that, there's a faded text autocomplete for the most probable search query that appears in the input box itself without changing the position of the cursor. See the attached screenshot. I checked the console, but nothing useful there.

How is an effect like that achieved?

Answer 1

Google does it by setting the value of a separate input element which is stacked directly behind the "active" one. If you look at the source, you can see there are a number of elements in the same place:

<div id="gs_lc0" style="position: relative;">
    <input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
    <div class="gbqfif" style="background-color: transparent; color: transparent; padding: 0px; position: absolute; z-index: 2; white-space: pre; visibility: hidden; background-position: initial initial; background-repeat: initial initial;" id="gs_sc0"></div>
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px;" id="gs_taif0" dir="ltr">
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px; visibility: hidden;" id="gs_htif0" dir="ltr">
</div>

It's the second <input> that seems to be handling the greyed-out suggestion text.

Answer 2

This is done by two inputs and CSS property position: absolute. One input has black color and contains current user input, and second input has gray color and lies beneath first input.

The CSS for that may look like following:

input.user-input {
    position: absolute;
    background: transparent;
    color: #000;
    z-index: 2
}
input.suggest-input {
    position: absolute;
    color: #ccc;
    z-index: 1
}