如何在同一输入类型=文本中对两段文本进行不同的样式设置

Question

我想知道如何以不同方式对文本中的两个部分进行样式设置 输入类型=文字，与谷歌非常相似。输入几个字符时 在谷歌搜索框中，它们以普通的黑色字体呈现，但它们是 然后是以灰色字体呈现的建议​​完成。所以，我们有两个部分 在同一个输入框中使用不同的字体属性。

Answer 1

文字输入是单色的 - 没办法。只有通过Javascript技巧才能实现这样的效果。

Google绝对使用div元素，灰色文本悬停在文本输入的上方或下方。 div首先是不可见的，但是当您开始输入时，它将包含查找文本。它具有与文本输入相同的字体大小。文本输入将包含完整的建议，并且颜色为黑色。

我认为以跨越浏览器的方式做到这一点并非完全无关紧要......但也完全不可能。可能已经存在一个组件或jQuery插件。

Answer 2

谷歌实际上并没有那样做，不过它呢？至少那不是我电脑上的样子。文本框采用普通字体，这是建议的完整项目。他们可能只是在div或其他东西中重新出现，而不是输入。

Answer 3

Google直接在彼此之上使用两个文本框。它们具有不同的文本颜色，顶部具有透明背景。使用Firebug查看它是如何工作的。