輸入標記中的多種字體顏色

Question

我很好奇Google的即時搜索功能如何在單個input[type=text]元素內保持兩種獨立的字體顏色。黑色表示用戶輸入，灰色表示建議。謝謝

Answer 1

他們只是覆蓋另一個<div>在同一地點。啓動Firebug，IE開發工具或任何東西，並尋找與id='grey'<div>。

<div style="position: relative; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: transparent;"> 
    <div class="lst" id="grey" style="padding-left: 7px; white-space: nowrap;"> 
    Text - hello world 
    <div class="lst" id="misspell"/> 
<div class="lst" style="left: -9000px; top: -900px; width: auto; overflow: hidden; position: absolute; max-width: 3000px;"> 
    Text - hello w 
<input name="q" title="Search" class="lst" type="text" maxLength="2048" autocomplete="off" init="true" value="hello w"/>