褪色文字对Google搜索的影响如何？

Question

在Google上搜索时，自动填充结果会显示在下方，就像许多其他网站一样。

但除此之外，对于输入框本身中出现的最可能的搜索查询，还有淡化文本自动填充，而不更改光标的位置。请参阅附带的屏幕截图我检查了控制台，但没有任何用处。

这样的效果怎么样？

Answer 1

Google通过设置单独的input元素的值来实现它，该元素直接堆叠在“活动”元素后面。如果查看源代码，可以看到同一个地方有许多元素：

<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>

这是第二个似乎正在处理灰色建议文本的<input>。

Answer 2

这是由两个输入和CSS属性position: absolute完成的。一个输入具有黑色颜色并包含当前用户输入，第二个输入具有灰色颜色并位于第一个输入下方。

CSS的内容可能如下所示：

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