Используйте родительский .input-icon
дела. Необязательно добавьте .input-icon-right
.
<div class="input-icon">
<i>$</i>
<input type="text">
</div>
<div class="input-icon input-icon-right">
<i>€</i>
<input type="text">
</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;
}
В отличие от принятого ответа, это сохранит проверки ввода на первый план, например, красной границы, когда есть ошибка.
JSFiddle usage example with Bootstrap and Font Awesome
Большое спасибо! Это решение, которое выполнило эту работу для меня. Отлично! – User3419
Кроме того, вы можете обернуть «$» внутри тега
@Cohen. Хотя хорошая идея, наличие нескольких ярлыков [может вызвать проблемы с доступностью] (http://stackoverflow.com/a/ 3992160/1094772). – rybo111