Multiple font colors in input tag

Question

I'm curious how the Google Instant Search feature supports two separate fonts in one input[type=text] element. Black for user input and gray for recommendations. Thanks

Answer 1

They simply overlap the <div> in the same place. Launch Firebug, IE Dev Tools or something else and find the <div> with id='grey' .

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