我希望有一个文本输入字段包含在最开始的"$“符号,无论什么编辑发生在该字段,该符号是持久的。
如果只接受数字作为输入,我会很好,但这只是一个花哨的添加。
发布于 2010-05-26 21:28:49
考虑使用无边界输入字段周围带有边框的跨度来模拟具有固定前缀或后缀的输入字段。这是一个基本的启动示例:
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
发布于 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;
}
与接受的答案不同,这将保留输入验证突出显示,例如在出现错误时显示红色边框。
发布于 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>
https://stackoverflow.com/questions/2913236
复制相似问题