Поместите значок внутри элемента ввода в форме - PullRequest
Новая
       87

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

233 голосов
/ 27 мая 2009

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

Screenshot of a web form with three inputs which have icons in them

Живая версия по адресу: Приливная тема

Ответы [ 13 ]

1 голос
/ 10 мая 2018

У меня была такая ситуация. Это не сработало из-за 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 не важны для решения. Я только что повторил свой оригинальный код.

1 голос
/ 09 декабря 2015 
 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

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

0 голосов
/ 13 февраля 2019

используйте этот класс CSS для ввода при запуске, затем настройте его соответствующим образом: 

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">
Страница:
...