Ми отримали приємну пораду від Лідії Даггер по електронній пошті із методом зміни стилів, які браузери 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, 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; )Демо
Див. Стилі автозаповнення пера в WebKit від CSS-Tricks (@ css-tricks) на CodePen.