Html 文本输入元素中文本背景的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1267044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for text background in text input element
提问by feicipet
Wondering if this is possible:
想知道这是否可能：
Let's say if I have a text input element that I want to use to input currencies. Probably I'd want a prefix before the text input to indicate what currency the user is performing his input in.
假设我有一个文本输入元素要用于输入货币。可能我希望在文本输入之前有一个前缀来指示用户正在执行输入的货币。
Hence, the HTML'd look something like:
因此，HTML 看起来像：
US$ <input type="text" />
But let's say I want the "US$" above to appear as a prefix insidethe text input itself, without the "US$" being part of the input string. Something like where "US$" is the background text of the text input. Of course, the text input would be indented to avoid clashing with the background text.
但是，让我们说，我想要的“US $”上面显示为一个前缀内的文本输入本身，而“US $”是输入字符串的一部分。类似于“US$”是文本输入的背景文本。当然，文本输入会缩进以避免与背景文本发生冲突。
Any way of accomplishing this without the use of images or Javascript?
在不使用图像或 Javascript 的情况下有什么方法可以做到这一点？
Thanks!
谢谢！
回答by Teddy Zetterlund
I didn't have time to try my solution in IE (leaving work now) but you can play around with this if you want: http://pastie.org/581472
我没有时间在 IE 中尝试我的解决方案（现在离开工作）但是如果你愿意，你可以玩这个：http: //pastie.org/581472
Update:Took a quick look in IE6-8 and it didn't work in any of them. Not sure if it's cause of the minimal HTML5 document or something else, I'll take another look at it later today or tomorrow.
更新：在 IE6-8 中快速浏览了一下，但在其中任何一个中都不起作用。不确定是最小的 HTML5 文档还是其他原因，我将在今天晚些时候或明天再看一遍。
Update 2:Updated the code to work with FF 3.5, Opera 9, Safari 4, IE6-8 (and probably more and earlier versions, but that is not tested). Grab the updated code.
更新 2：更新了代码以适用于 FF 3.5、Opera 9、Safari 4、IE6-8（可能还有更多和更早的版本，但未经过测试）。获取更新的代码。
<!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>
Updated code:
更新代码：
<!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>
回答by Zack Marrapese
If you really wanted to, you could do the following:
如果你真的想，你可以做以下事情：
1.) Start with a field being defined as follows:
1.) 从定义如下的字段开始：
<div class="moneyFieldHolder">
<input type="text" class="moneyField" />
</div>
2.) Create a background image of a textbox with US$ inside it:
2.) 创建一个带有 US$ 的文本框的背景图像：
----------------
|US$ |
----------------
3.) set up the CSS:
3.) 设置 CSS：
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
And that's it...this is definitely a hacky solution and should only really be used if absolutely necessary. Also, this does -- of course -- require an image.
就是这样......这绝对是一个hacky解决方案，只有在绝对必要时才应该真正使用。此外，这确实——当然——需要一个图像。
回答by Scott Evernden
i would think you could do this with an absolutely positioned div that has a transparent bg. alternatively, you might have some success intercepting every keystroke and updating what is displayed yourself.
我认为您可以使用具有透明背景的绝对定位 div 来做到这一点。或者，您可能会成功拦截每次击键并更新自己显示的内容。
