Значок изображения HTML5 для ввода заполнителя

Я хотел бы добавить значок изображения в местозаполнитель ввода, как на этом рисунке:

Обратите внимание, что это заполнитель, поэтому, когда пользователь начинает печатать, значок также исчезает.

Я пришел со следующим решением для webkit (Safari + Chrome) с помощью ::-webkit-input-placeholder и ::before. К сожалению, прямое применение к Mozilla, похоже, не работает.

Итак, мой вопрос: существует ли кросс-браузерное решение для добавления значка изображения в местозаполнитель ввода?

Решение для webkit:

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}

Ответ 1

Вы можете установить его как background-image и использовать text-indent или padding, чтобы сдвинуть текст вправо.
Вы можете разбить его на два элемента.

Честно говоря, я бы избегал использования HTML5/CSS3 без хорошей резервной. Слишком много людей используют старые браузеры, которые не поддерживают все новые причудливые вещи. Это займет некоторое время, прежде чем мы сможем отказаться от резервного копирования, к сожалению: (

Первый метод, который я упомянул, является самым безопасным и простым. Оба способа требуют, чтобы Javascript скрывал значок.

CSS

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

JavaScript:

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

Сентябрь 25h, 2013

Не могу поверить, что я сказал: "Оба способа требуют JavaScript, чтобы скрыть значок.", потому что это не совсем так.

Наиболее частое время, чтобы скрыть текст заполнителя, изменяется, как это предлагается в этом ответе. Для значков, однако, это хорошо, чтобы скрыть их в фокусе, которые можно сделать в CSS с псевдо-классом active.

#search:active { background-image: none; }

Черт, используя CSS3, вы можете заставить его исчезнуть!

http://jsfiddle.net/2tTxE/

5 ноября 2013 г.

Конечно, есть и CSS3:: перед псевдоэлементами. Остерегайтесь поддержки браузеров!

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Ответ 2

`CSS:

input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

HTML:

<input type="text" id="search" name="search" value="search" />`

Ответ 3

<html>
<head>
<style> 
input[type=text] {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Ответ 4

Я не знаю, есть ли лучший ответ там с течением времени, но это просто и работает,

input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

Стиль его подходит.

Ответ 5

Добавление к ответу Тима:

  #search:placeholder-shown {
     // show background image, I like svg 🤗
     // when using svg, do not use HEX for colour; you can use rbg/a instead
     // also notice the single quotes
     background-image url('data:image/svg+xml; utf8, <svg>... <g fill="grey"...</svg>')
     // other background props
   }

   #search:not(:placeholder-shown) { background-image: none;}