Как вставить знак $ в инпут?

Question

[Артём Цымбалюк]

Здравствуйте. Наверное дурацкий вопрос, но ничего толкового найти не могу
Нужно в инпут вставить знак $
before и after я как понял не работает для инпута. Как тогда это реализовать?
можно маленький примерчик на codepen?

Comments

[alvvi]

Что значит вставить в инпут? В плейсхолдер что ли?

Answer 1

[Андрей Токмаков]

Если надо подобие before/after, то оберните ваш input div'ом м задавайте before/after ему

Answer 2

[nofuture trustnoone]

Вот так

Answer 3

[Артём Ведищев]

А может так https://jsfiddle.net/ttbdzpv0/1/

Answer 4

[Stalker_RED]

Можно так:
<div class="foo"><input type="text"></div>

.foo {
  position: relative;
  box-sizing: border-box;
}
.foo input {
  padding-left: 1em;
}
.foo::before {
  content: '$';
  position: absolute;
  top: 2px; left: 3px;
  pointer-events: none;
}

https://jsfiddle.net/1uhgL0mx/