Значок в поле ввода с содержимым и :before вместо фонового изображения

Моя проблема заключалась в том, что у меня есть этот хороший набор шрифтов, и я использую его для размещения пользовательских значков рядом с моими кнопками. (например: см. здесь)

Но теперь я хочу создать поле ввода и поставить перед ним значок, например ЗДЕСЬ< /а>

Но вместо фонового изображения я хочу поместить шрифт в предыдущее содержимое, возможно ли это?


css pseudo-element inputbox
person Noitidart    schedule 02.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

CSS

.input-box { position: relative; }

input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; }

.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }

HTML

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">To;</span>
</div>

проверьте следующий пример здесь

http://jsfiddle.net/pZLcg/52/

person Muhammad    schedule 02.03.2014
comment
О, это очень интересно! Спасибо, Наим, чувак! Нет ли метода использования контента до/после? :( потому что этим методом мы создаем div и прочее :( - person Noitidart; 02.03.2014
comment
эй, чувак, я сделал это здесь, я хочу, чтобы красное текстовое поле заполнило доступный контент на 100% (как во что бы то ни стало :) не берется) такое возможно? - person Noitidart; 02.03.2014
comment
Ну почти!! Я сделал фон устройства синим, и теперь я пытаюсь заставить красное текстовое поле занимать оставшееся пространство (так что оно должно закрывать все зеленое), большое спасибо за эту помощь! :) - person Noitidart; 02.03.2014
comment
Принято :) Но не могли бы вы сделать так, чтобы красное поле ввода заполнило оставшееся пространство в родительском div, пожалуйста :) - person Noitidart; 03.03.2014
comment
лучше установить maxlength=20 для типа ввода. - person Muhammad; 03.03.2014
comment
О, причина, по которой мне это нужно, чтобы заполнить зеленое пространство, заключается в том, что я заменяю текстовое поле, а текстовое поле, которое я заменил, занимало 100% ширины формы. я не могу установить максимальную длину, потому что это ограничит ввод символов. :( я не принял решение, но оставил +1 за ваши усилия - person Noitidart; 03.03.2014