Поместить значок внутри элемента ввода в виде

Как поместить значок внутри элемента ввода формы?

Скриншот веб-формы с тремя входами, в которых есть значки

Онлайн-версия: тема Tidal Force

На вашем сайте используется комбинация трюков CSS, чтобы снять это. Во-первых, он использует фоновое изображение для элемента . Затем, чтобы переместить курсор, он использует padding-left .

Другими словами, у них есть эти два правила CSS:

 background: url(images/comment-author.gif) no-repeat scroll 7px 7px; padding-left:30px; 

Решения CSS, размещенные другими, – лучший способ добиться этого.

Если это должно дать вам какие-либо проблемы (прочитайте IE6), вы также можете использовать вход без полей внутри div.

 

Не как «чистый», но должен работать на старых браузерах.

Вы можете попробовать следующее:

 input[type='text'] { background-image: url(images/comment-author.gif); background-position: 7px 7px; background-repeat: no-repeat; } 

Я считаю это лучшим и самым чистым решением. Использование текстового отступа на input элементе

CSS:

 #icon{ background-image:url(../images/icons/dollar.png); background-repeat: no-repeat; background-position: 2px 3px; } 

HTML:

  

Решение без фоновых изображений:

 #input_container { position:relative; padding:0 0 0 20px; margin:0 20px; background:#ddd; direction: rtl; width: 200px; } #input { height:20px; margin:0; padding-right: 30px; width: 100%; } #input_img { position:absolute; bottom:2px; right:5px; width:24px; height:24px; } 
 
 .icon{ background: url(1.jpg) no-repeat; padding-left:25px; } 

добавьте выше tags в свой CSS-файл и используйте указанный class.

Просто используйте свойство background в своем CSS.

  #foo { background: url(/img/foo.png); } 

Использование с символом font

  

ИЛИ

  #foo::before { font-family: 'FontAwesome'; color:red; position: relative; left: -5px; content: "\f007"; } того  #foo::before { font-family: 'FontAwesome'; color:red; position: relative; left: -5px; content: "\f007"; } 
   

Например, вы можете использовать это: ярлык со скрытым вводом (значок присутствует).

У меня была такая ситуация. Это не сработало из-за background: #ebebeb; , Я хотел поместить фон в поле ввода, и это свойство постоянно отображалось в верхней части фонового изображения, и я не мог видеть изображение! Итак, я переместил свойство background чтобы оно было выше свойства background-image и оно сработало.

 input[type='text'] { border: 0; background-image: url('../img/search.png'); background-position: 9px 20px; background-repeat: no-repeat; text-align: center; padding: 14px; background: #ebebeb; } 

Решение для моего дела было:

 input[type='text'] { border: 0; background: #ebebeb; background-image: url('../img/search.png'); background-position: 9px 20px; background-repeat: no-repeat; text-align: center; padding: 14px; } 

Просто отметим, что border , свойства padding и text-align не важны для решения. Я только что воспроизвел оригинальный код.

Вы можете попробовать следующее: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

 

Это работает для меня:

 input.valid { border-color: #28a745; padding-right: 30px; background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png'); background-repeat: no-repeat; background-size: 20px 20px; background-position: right center; } 
 
Давайте будем гением компьютера.