gpt4 book ai didi

html - 文本输入元素中文本背景的 CSS

转载 作者:太空狗 更新时间:2023-10-29 14:07:35 31 4
gpt4 key购买 nike

想知道这是否可能:

假设我有一个文本输入元素,我想用它来输入货币。可能我希望在文本输入前有一个前缀,以指示用户正在执行其输入的货币。

因此,HTML 看起来像这样:

US$ <input type="text" />

但假设我希望上面的“US$”显示为文本输入本身内部的前缀,而不是“US$”作为输入字符串的一部分。比如“US$”是文本输入的背景文本。当然,文本输入会缩进以避免与背景文本冲突。

有什么方法可以在不使用图像或 Javascript 的情况下实现这一点?

谢谢!

最佳答案

我没有时间在 IE 中尝试我的解决方案(现在离开工作),但如果你愿意,你可以尝试一下:http://pastie.org/581472

更新:在 IE6-8 中快速浏览了一下,它在任何一个中都不起作用。不知道是不是 HTML5 文档太少的原因,还是其他什么原因,今天晚些时候或明天再看一下。

更新 2:更新了代码以适用于 FF 3.5、Opera 9、Safari 4、IE6-8(可能还有更多和更早的版本,但未经过测试)。 Grab the updated code .

<!doctype html>
<title>Background text inside text input control</title>

<style>
form { position: relative; }
input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>

<form action="" method="post">
<input type="text">
<span>US$</span>
</form>

更新代码:

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>

关于html - 文本输入元素中文本背景的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1267044/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com