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

यह दो इनपुट और सीएसएस संपत्ति position: absolute द्वारा किया जाता है। एक इनपुट में काला रंग और वर्तमान उपयोगकर्ता इनपुट शामिल है, और दूसरा इनपुट ग्रे रंग है और पहले इनपुट के नीचे स्थित है।

कि के लिए सीएसएस निम्नलिखित की तरह लग रहे हो सकता है:

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