Как вставить иконку внутрь input элемента в HTML и CSS

Быстрый ответ

Хотите вставить иконку в элемент input? Используйте CSS. Выберите набор иконок, такой как Font Awesome, поместите его в контейнер с position: relative, а самой иконке укажите position: absolute. Затем подстройте положение иконки с помощью свойств top и left для идеального расположения внутри элемента:

<div style="position: relative;">
  <i class="fa fa-search" style="position: absolute; top: 50%; left: 8px; transform: translateY(-50%);"></i>
  <input type="text" style="padding-left: 30px;">
</div>

Теперь ваша иконка эстетично помещается в поле ввода, и текст не перекрывается изображением.

Настройка иконок при помощи фонов CSS

Можно использовать CSS и свойство background-image для оформления input. Этот метод подойдет, если нужно интегрировать иконку прямо в дизайн текстового поля:

.input-with-icon {
  background: url('icon-search.png') no-repeat 10px center;
  padding-left: 35px;
}

Чтобы применить этот стиль к вашей форме, используйте:

<input type="text" class="input-with-icon">

Размер иконки может быть подстроен с помощью background-size, а background-repeat: no-repeat поможет исключить повторение фонового изображения.

Обработчики кликов: Иконки в действии

Иконки могут выполнять конкретные действия при клике на них. Оберните иконку и элемент ввода в label или div и добавьте обработчик событий на JavaScript:

<div style="position: relative;">
  <input type="text" id="search">
  <label for="search" style="position: absolute; right: 10px; cursor: pointer;">❌</label>
</div>

document.querySelector('label').addEventListener('click', function() {
  document.getElementById('search').value = '';
});

Тонкости совместимости с разными браузерами

При разработке убедитесь, что ваше решение корректно отображается во всех актуальных и устаревших версиях браузеров, обернув иконку и input в div с границей.

Визуализация

Ведите себя так, как будто каждый input – это гнездо, а иконка – его ценное яйцо. Чтобы добиться гармоничного размещения иконки, используйте:

<input type=${secure} placeholder="🔍 Поиск">

Или вот так:

<div style="position: relative;">
  <input type="text" style="padding-left: 20px;">
  <i style="position: absolute; left: 0; top: 0;">🔍</i>
</div>

Благодаря такому расположению иконка будет размещена так, как и следовало ожидать.

Продвинутые примеры использования

Интерактивная иконка: От простого к динамичному

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

<div style="position: relative;">
  <input type="text" style="padding-right: 20px;" oninput="toggleClearIcon(this)">
  <i style="position: absolute; right: 0; top: 0; cursor: pointer;">❌</i>
</div>

function toggleClearIcon(inputElement) {
  const clearIcon = inputElement.nextSibling;
  if (inputElement.value.length > 0) {
    clearIcon.style.display = 'block';
  } else {
    clearIcon.style.display = 'none';
  }
}

Подробнее об этом расскажет наш спикер на видео

Дизайн с эмоциями: Иконки для обратной связи при валидации

Иконки могут отражать результаты проверки введённых данных, например, показывать галочку при успешной проверке и восклицательный знак при ошибке.

Профессиональный совет: Сделайте это доступным

Убедитесь, что ваш интерфейс доступен каждому. Если иконка несёт важную информацию, добавьте ей альтернативный текст или используйте aria-label для поля ввода.

Полезные материалы

1. HTMLInputElement – Web APIs | MDN — исчерпывающий ресурс по работе с элементами ввода HTML.
2. Input group · Bootstrap — способы интеграции иконок в поля форм при помощи Bootstrap.
3. Find Icons with the Perfect Look & Feel | Font Awesome — множество примеров иконок для использования в формах.
4. Newest 'input+icons' Questions – Stack Overflow — обсуждения в сообществе о способах вставки иконок в HTML поля ввода.
5. UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2) — Smashing Magazine — передовые методы и лучшие практики проектирования форм.