输入标签中的多种字体颜色答案

【问题标题】：Multiple font colors in an Input tag输入标签中的多种字体颜色
【发布时间】：2011-05-09 09:28:30
【问题描述】：

我很好奇 Google 的即时搜索功能如何在单个 input[type=text] 元素中保留两种不同的字体颜色。黑色表示用户输入，灰色表示推荐。谢谢

【问题讨论】：

【解决方案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"/>

【讨论】：

只需添加：请注意，您不能标记/将光标放在搜索框中的文本内 - 因为它不是您单击/标记的实际输入框，而是 div 覆盖