Home/ Questions/Q 8886169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:29:35+00:00

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

  • 0

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.

enter image description here

How is an effect like that achieved?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0