Изменение стилей автозаполнения в браузерах WebKit онлайн урок.


Мы получили хороший совет от Lydia Dugger по электронной почте с помощью метода изменения стилей, которые применяются браузеры WebKit, чтобы сформировать поля, которые были автозаполнены.

# Что мы подразумеваем под автозаполнением

Многие браузеры (включая Chrome и Safari) предоставляют параметр, который позволяет пользователям автоматически заполнять детали для общих полей формы. Вы видели это при заполнении формы, которая запрашивает такие вещи, как имя, адрес и адрес электронной почты.

Уловка заключается в том, что пользователи должны включить этот параметр, чтобы этот фрагмент был эффективным. Если этот параметр включен, то браузеры WebKit будут создавать поля, которые он автозаполняет для пользователя, например:

Обратите внимание, что заполненные автозаполнением поля имеют желтый фон? Вот что мы имеем в виду и будем менять с помощью этого фрагмента.

# Фрагмент

Мы можем использовать псевдо-селектор-webkit-autofill, чтобы нацелить эти поля и стилизовать их по своему усмотрению. Стиль по умолчанию влияет только на цвет фона, но здесь применяются другие свойства, такие какborderиfont-size. Мы можем даже изменить цвет текста, используя-webkit-text-fill-color, который включен в нижеприведенный фрагмент.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}

# Демонстрация