将输入[文本]的一部分设为灰色?
你知道谷歌即时,当他们提供建议时,他们建议的搜索字段会变成灰色,但你输入的部分总是黑色的。那么我想用类似的系统达到同样的效果。我该怎么办呢?
谢谢,费拉
You know how google instant, when they provide suggestions, the bit of the search field that they suggested turns grey, but the bit you typed is always black. Well I want to achieve the same effect with a similar system. How would I go about this?
Thanks, Fela
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您将需要 2 个文本框彼此叠置。使顶部的文本框具有透明背景(这些将是可选择的文本框)。然后将后面的文本框的颜色设置为灰色(这将是显示建议的文本框)。
You will need 2 textboxes positioned on top of each other. Make the textbox on top have a transparent background (these will be the selectable textbox). Then set the color of the textbox behind to grey (this will be the textbox displaying the suggestion).
你不,
如果您仔细观察 Google 即搜即得,您会发现它们有一个元素正好位于输入框的位置。
为了简单起见:只需将 div 放置在输入字段所在的位置即可。然后像这样:
You don't,
If you look closely to the Google Instant, you'll see that they have a element positioned exactly where the inputbox is.
So to make it simple: Just position a div where your inputfield is. Then like so:
您可以从灰色
background-image
开始并调整其background-position
属性You can start with a grey
background-image
and adjusting itsbackground-position
property