Многие веб-разработчики используют популярный прием, при котором плейсхолдер смещается при фокусировке на поле ввода. Выглядит это примерно так:
CSS:
input:focus ~ label {
/* необходимые стили */
}
HTML:
<input id="user">
<label for="user">Input</label>
Проблема
Однако, при использовании SSL-шифрования на сайте, возникает определенная проблема. Если пользователь ранее заполнял форму авторизации, браузер может автоматически заполнить поле ввода. Но это автозаполнение происходит не при получении фокуса полем ввода, а при загрузке страницы. Таким образом, данные автозаполнения могут накладываться поверх label-плейсхолдера, что создаст визуальный беспорядок.
Более того, если попытаться отслеживать событие заполнения поля ввода через JavaScript, оно может не сработать, так как автозаполнение происходит до фактического взаимодействия с элементом.
Решение
Для решения этой проблемы можно использовать следующий подход, который позволяет корректно управлять поведением label-плейсхолдера даже при автозаполнении полей.
В данном случае, цвет стандартного плейсхолдера в поле ввода можно сделать прозрачным, чтобы он не перекрывал текст label. Это позволяет сохранять чистоту интерфейса даже при автоматическом заполнении полей ввода браузером.
