将 input[text] 的一部分设为灰色？答案

【问题标题】：Make part of input[text] grey?将 input[text] 的一部分设为灰色？
【发布时间】：2011-07-19 14:48:03
【问题描述】：

你知道谷歌即时，当他们提供建议时，他们建议的搜索字段的位会变成灰色，但你输入的位总是黑色的。好吧，我想用类似的系统达到同样的效果。我该怎么办？

谢谢，费拉

【问题讨论】：

【解决方案1】：

你没有，如果您仔细查看 Google Instant，您会发现它们有一个元素正好位于输入框所在的位置。所以为了简单起见：只需在输入字段所在的位置放置一个 div。然后像这样：

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</div>

【讨论】：

【解决方案2】：

您将需要 2 个文本框并排放置。使顶部的文本框具有透明背景（这些将是可选择的文本框）。然后将后面的文本框的颜色设置为灰色（这将是显示建议的文本框）。

【讨论】：

【解决方案3】：

您可以从灰色的background-image 开始并调整其background-position 属性

【讨论】：