Hiệu ứng văn bản bị mờ trên tìm kiếm của Google hoạt động như thế nào?

Question

Trong khi tìm kiếm trên Google, kết quả tự động hoàn tất hiển thị bên dưới, giống như nhiều trang web khác.

Nhưng ngoài việc đó, có một autocomplete văn bản mờ cho truy vấn tìm kiếm có thể xảy ra nhất mà xuất hiện trong hộp đầu vào bản thân mà không thay đổi vị trí của con trỏ. Xem ảnh chụp màn hình đính kèm. Tôi đã kiểm tra giao diện điều khiển, nhưng không có gì hữu ích ở đó.

Hiệu ứng như thế nào đạt được?

Answer 1

Google thực hiện việc này bằng cách đặt giá trị của một yếu tố riêng biệt input được xếp chồng lên ngay phía sau phần tử "hoạt động". Nếu bạn nhìn vào các nguồn, bạn có thể thấy có một số yếu tố trong cùng một vị trí:

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

Đó là thứ hai <input> mà dường như được xử lý văn bản đề nghị màu xám-out.

Answer 2

Điều này được thực hiện bởi hai yếu tố đầu vào và thuộc tính CSS position: absolute. Một đầu vào có màu màu đen màu và chứa đầu vào người dùng hiện tại và đầu vào thứ hai có màu màu xám và nằm bên dưới đầu vào đầu tiên.

Các CSS cho rằng có thể trông giống như sau:

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