html - 如何在相同输入类型=文本中设置不同样式的两段文本

Question

我想知道如何在同一个文本的两个部分设置不同的样式input type=text，和谷歌很像。当您输入几个字符时在谷歌搜索框中，它们以正常的黑色字体呈现，但它们是随后是以灰色字体呈现的建议​​完成。所以，我们有两个部分在同一个输入框中使用不同的字体属性。

Answer 1

文本输入是单色的——没有办法解决这个问题。只有通过 Javascript 欺骗才能实现这样的效果。

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

我认为以跨浏览器工作的方式做到这一点并非完全微不足道……但也并非完全不可能。可能已经存在一个组件或 jQuery 插件。