Использование псевдоэлементов :before/:after с input в CSS

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

К сожалению, псевдоэлементы :before или :after не подходят для работы с полями ввода. В качестве решения этого вопроса можно предложить использование обертки, например, div:

<div class="input-icon">
  <input type="text" />
</div>

.input-icon::before {
  content: '🔎'; /* Это символизирует поиск */
  /* Здесь мы подгоняем иконку под наш дизайн */
}

Ваша задача — стилизовать обертку .input-icon так, чтобы создать иллюзию настоящего поля ввода.

Завершение

Поле ввода — это специфический элемент HTML, относящийся к категории замещаемых элементов, и он сохраняет свое содержимое в тайне от прямого воздействия стилей. Браузеры различаются в отображении элемента input, что ограничивает наши возможности по его кастомизации. Псевдоэлементы :before и :after предназначены для взаимодействия с содержимым, но они не применимы для <input>.

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

Поле ввода не принимает псевдоэлементы в качестве "одежды":

Не-Input Элемент (👕👖): Допускает украшения до (👔) и после (🧥).

Поле ввода (🕴️): Избегает смены облика! Предпочитает аксессуары (🎩).

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

👕👖::before::after // Для не-input элементов: Да, пожалуйста!
🕴️❌::before::after // Для поля ввода: Нет, спасибо!

Таким образом, элемент input упорно противостоит прямой стилизации.

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

1. ::before – CSS | MDN — Все о псевдоэлементе ::before.
2. ::after – CSS | MDN — Подробное описание псевдоэлемента ::after.
3. ::before / ::after | CSS-Tricks — Руководство по использованию ::before и ::after.
4. html – Можно ли применить псевдоэлемент :before или :after к полю ввода? – Stack Overflow — Обсуждение альтернативных методов применения псевдоэлементов к полям ввода.
5. Дебаты "А нужен ли нам CSS?" | CSS-Tricks — Статья об актуальности CSS в настоящее время.
6. "::before ::after" | Can I use — Информация о поддержке псевдоэлементов ::before и ::after в различных браузерах и их версиях.
7. Модуль CSS псевдоэлементов уровня 4 — Последние новости о CSS псевдоэлементах.