Эта статья — перевод оригинальной статьи Sunkanmi Fafowora ":autofill"
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы <input>, которые содержат контент, автоматически заполняемый браузером.
В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки?
![](https://habrastorage.org/getpro/habr/upload_files/2db/0d8/1d1/2db0d81d10198bd2ce8f92eb3d22c34f.gif)
Заметили, что автозаполненные поля имеют желтый фон? Вот как браузер стилизует поле, когда оно содержит автоматически заполняемый контент. :auto-fill позволяет нам переопределить или расширить это с помощью наших собственных стилей.
input:auto-fill {
outline: 5px solid rgb(0 0 0 / .5);
}
Когда происходит автозаполнение?
Это немного сложный вопрос, потому что у каждого браузера есть свои настройки, которые позволяют пользователю включать или отключать автозаполнение.
![Safari Safari](https://habrastorage.org/getpro/habr/upload_files/3b6/a7c/153/3b6a7c153f3c9117715c028477653cf8.png)
![Chrome Chrome](https://habrastorage.org/getpro/habr/upload_files/dd0/d22/f59/dd0d22f59459c549d0f35f4677fb6864.png)
![Firefox Firefox](https://habrastorage.org/getpro/habr/upload_files/4e2/1c4/cf9/4e21c4cf982f14a8fbd26376af5106d9.png)
Таким образом, вы устанавливаете стили автозаполнения для ввода с помощью :auto-fill, но это не означает, что это действительно произойдет. Пользователь должен включить автозаполнение в настройках браузера, чтобы функция работала и применялись стили.
Автозаполнение может произойти, когда атрибут автозаполнения применяется к инпуту формы:
<input id="name" autocomplete="name">
Но атрибут является скорее советом, чем жестким правилом, потому что нет возможности переопределить настройку браузера автозаполнения непосредственно в CSS, если она отключена. HTML Living Standard, кажется, поддерживает это в примечании:
Одним из способов автозаполнения может быть использование атрибута autocomplete, но браузеры могут выполнять автозаполнение даже без этого атрибута.
И в большинстве случаев так оно и есть — по крайней мере, в нашем тестировании.
И в большинстве случаев так оно и есть — по крайней мере, в нашем тестировании.
Переопределение: стили автозаполнения
Браузеры часто используют собственные стили. Мы называем эти стили пользовательского агента (UA), и они являются причиной того, что у нас есть такие вещи, как сброс CSS, чтобы переопределить их для согласованных исходных стилей кросс-браузера.
Ранее мы видели, что Chrome применяет светло-желтый фоновый цвет к автозаполненному контенту. Стили UA Chrome включают:
![](https://habrastorage.org/getpro/habr/upload_files/051/b62/c00/051b62c00079a012e25e79d60a1def74.png)
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: fieldtext !important;
}
Согласно MDN, переопределить эти стили — это то, что мы не можем сделать в CSS, но этот фрагмент от Джеффа, кажется, делает свое дело, используя вставку box-shadow для изменения цвета фона при использовании -webkit-text-fill-color для изменить цвет текста:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #31b0dd;
-webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}
Демо
https://codepen.io/sunkanmii-the-styleful/pen/MWGaxaE
Вот простая форма регистрации, которая принимает несколько входных данных. Обратите внимание, что при автоматическом заполнении информации для свойства схемы запускается анимация. Но, эй, убедитесь, что у вас включено автозаполнение в настройках вашего браузера, чтобы оно работало. Даже в этом случае браузеру может потребоваться захватить и сохранить информацию для полей, прежде чем он сможет делать предложения.
Комментарии (4)
storoj
25.10.2022 01:53+3Пожалуйста, умоляю, не надо ничего стилизовать в формах ввода. Как настилизуют, и потом ничего не работает: ни автофилл емейлов, ни тем более автофилл данных карты, ни иногда даже копирование/вставка.
Лучше просто не трогать, чтобы не сломать то, о чём даже не знаешь, но чем пользуются люди.
danilovmy
И, в большинстве случаев, так оно и есть — по крайней мере, в нашем тестировании. У вас абзац задвоился. Поправьте пожалуйста. А так - прикольно конечно застилить, если заавтокомплечено, жаль только не всегда работает. В сафари особенно.