将输入[文本]的一部分设为灰色?

发布于 2024-10-24 23:00:08 字数 91 浏览 6 评论 0 原文

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

谢谢,费拉

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

度的依靠╰つ 2024-10-31 23:00:08

您将需要 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).

娇柔作态 2024-10-31 23:00:08

你不,
如果您仔细观察 Google 即搜即得,您会发现它们有一个元素正好位于输入框的位置。
为了简单起见:只需将 div 放置在输入字段所在的位置即可。然后像这样:

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</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:

<div>
<span class="originaltext">hello</span>
</span class="suggested">world</span>
</div>
梦开始←不甜 2024-10-31 23:00:08

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

You can start with a grey background-image and adjusting its background-position property

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文