Нарезка в Photoshop — New Layer Based Slice
На главную Наверх

12 февраля 2012

Как перекрасить поля с автозаполнением в Google Chrome

css Комментарии

В Google Chrome в user agent stylesheet для полей с автозаполнением прописан желтый фон (#FAFFBD) и черный цвет текста, причем оба правила усилены с помощью !important и переопределить их в своей CSS нельзя. Но есть способы решить эту проблему обходными путями.

В трекере описан этот баг, но пока решения нет.

Автозаполнение можно выключить с помощью autocomplete="off":

<form action="…" method="post" autocomplete="off">

Обновлено 30 октября 2012.

Жёлтые поля ввода можно перекрасить с помощью box-shadow
Жёлтые поля ввода можно перекрасить при помощи box-shadow

Поля c автокомплитом можно перекрасить при помощи трюка с box-shadow:

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px white; /* цвет вашего фона */
    -webkit-text-fill-color: black; /* цвет текста */
}

Если вы для :focus состояния задавали стили с использованием box-shadow, то вам придется заново их переопределить:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 5px 0    blue,   /* ваш box-shadow для :focus */
                  inset 0 0 0   50px white;  /* цвет вашего фона */
    -webkit-text-fill-color: black;          /* цвет текста */
}

При помощи нескольких теней можно имитировать градиент.

© Павел Радьков 2012.

Поделиться
Твитнуть
Плюсануть
Поделиться
Телеграфировать
  • 04 июля 2017

Как правильно использовать переменные в препроцессорах Less и Sass

  • 13 февраля 2016

Как верстальщику получить код ревью

  • 02 мая 2014

Веб-лицензии для платных шрифтов могут стоить вам дорого

  • 01 мая 2014

Бесплатная замена платному Helvetica Neue

  • 25 апреля 2014

Деплой Docpad-сайта на GitHub Pages

  • 07 апреля 2014

Краткое руководство по Маркдауну

  • 10 февраля 2014

О каких дизайнерах мечтают верстальщики

  • 09 февраля 2014

Захват экрана в GIF

  • 06 февраля 2014

Font-weight: bolder для шрифтов со множеством начертаний

  • 04 февраля 2014

Параметры subject и body в mailto ссылках

  • 26 января 2014

Посещённая ссылка при наведении

  • 19 января 2014

CSS-селектор :not. Полезные примеры

  • 24 января 2013

Списки и картинки с флоатами

  • 09 декабря 2012

Pointer-events

  • 27 ноября 2012

Как отключить javascript в Google Chrome

  • 28 октября 2012

Перечёркивание крест-накрест

  • 08 апреля 2012

Отладка мобильных сайтов в Webkit. Инспектор кода на мобильных устройствах

  • 18 марта 2012

Горячие клавиши для выбора предыдущего и следующего слоя в Photoshop

  • 11 марта 2012

HTML-сущности и их UTF-коды

  • 22 февраля 2012

Нарезка в Photoshop — New Layer Based Slice

  • 12 февраля 2012

Как перекрасить поля с автозаполнением в Google Chrome