How does the faded text effect on Google searches work?

Question

When you search on Google, autocomplete results are displayed below, like many other sites.

But besides this, there is a faded autocomplete text for the most likely search query that appears in the input window itself , without changing the cursor position. See Attached Screenshot. I checked the console but nothing useful.

How is this effect achieved?

Answer 1

Google does this by setting the value of the element to a separate input , which fits directly behind the "active". If you look at the source, you will see that there are several elements in one 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> 

This is the second <input> that seems to be processing text with gray text.

Answer 2

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

CSS for this might look like this:

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