带有货币符号的HTML文本输入字段
带有货币符号的HTML文本输入字段
提问于 2010-05-26 21:14:51
我希望有一个文本输入字段包含在最开始的"$“符号，无论什么编辑发生在该字段，该符号是持久的。
如果只接受数字作为输入，我会很好，但这只是一个花哨的添加。
回答 15
Stack Overflow用户
回答已采纳
发布于 2010-05-26 21:28:49
考虑使用无边界输入字段周围带有边框的跨度来模拟具有固定前缀或后缀的输入字段。这是一个基本的启动示例：
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}<span class="currencyinput">$<input type="text" name="currency"></span>
Stack Overflow用户
发布于 2013-05-17 22:10:13
使用父.input-icon div。可以选择添加.input-icon-right。
<div class="input-icon">
<input type="text">
<i>$</i>
</div>
<div class="input-icon input-icon-right">
<input type="text">
<i>€</i>
</div>将图标与transform和top垂直对齐，并将pointer-events设置为none，以便单击时将焦点置于输入上。根据需要调整padding和width：
.input-icon {
position: relative;
}
.input-icon > i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
}
.input-icon > input {
padding-left: 25px;
padding-right: 0;
}
.input-icon-right > i {
right: 0;
}
.input-icon-right > input {
padding-left: 0;
padding-right: 25px;
text-align: right;
}与接受的答案不同，这将保留输入验证突出显示，例如在出现错误时显示红色边框。
Stack Overflow用户
发布于 2018-10-13 01:36:21
我最终需要将类型保留为数字，因此使用CSS使用绝对位置将美元符号推入输入字段。
<div>
<span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
<input type="number" style="padding-left: 8px;">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2913236
复制相关文章
相似问题