13 января 2010 :Меняем цвета Input в Google Chrome

Поскольку в процессе вёрстки я проверяю результат во всех браузерах, я не могла не заметить что в Chrome (и др. Webkit) очень некрасиво ведут себя поля ввода. Во-первых, у них появляется очень некрасивая обводка при клике на них. Во-вторых, для сохранённых данных Хром подсвечивает форму ввода мерзким жёлтым цветом, при этом в случае заданного белого цвета шрифта всё совсем не читабельно (см. картинку ниже). Как это исправить?

Хром и Сафари - понимают селектор *:focus. Именно он отвечает за поведение того как себя ведёт поле ввода при фокусе. Для этого необходимо установить ему значение

*:focus {outline: none;}

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

Далее, баг с подсветкой сохранённых полей ввода в webkit известен уже давно и был сообщён разработчикам Chrome полтора года назад. Те его закрыли с резолюцией WontFix. Это, дескать, нарушает привычное пользователю поведение (behavior) браузера.

В самом движке webkit жёстко забит следующий CSS:

input:-webkit-autofill { 
        background-color: #FAFFBD !important; background-image:none !important; 
}

Что не позволяет изменить его цвет средствами CSS. Улучшение было найдено одним из участников, необходимо в начале файла стилей добавить

input:-webkit-autofill {
        color: #2a2a2a !important;
}

Это позволит хрому заменить ещё и цвет для автозаполненных полей, принудительно на чёрный.

Заключение: два этих фикса позволят приблизиться к поведению других браузеров и улучшить читабельность в случае светлых цветов шрифтов.

я буду очень признательна если вы прокоментируете эту статью

#1
selenit2 (selenit)

14.01.2010 14:09:10

Большое спасибо за напоминание об этой важной мелочи и полезные советы!
Но, имхо, так уж махом сносить outline у всего — немножко перегиб:). Для клавиатурной навигации по кнопкам и ссылкам он многим помогает. Думаю, лучше указывать что-то вроде input[type="text"]:focus, input[type="password"]:focus, textarea:focus — чтоб убить противную обводку только у текстовых полей, а для кнопок, чекбоксиков и прочей полезной мелочи оставить "привычное поведение браузера". И для ссылок, пожалуй, сменить бы этот outline на привычный FF-овский пунктир. Но опять же, это лишь мое имхо.
#2
Moony (Елена Лунная)

14.01.2010 23:23:39

Да. Дельная мысль.
Правда у меня в одном проекте заказчики принципиально просили "убрать пунктир у ссылки-картинки при клике", долго искала как это сделать.
#3
selenit2 (selenit)

15.01.2010 12:44:49

Угу, бывают такие несознательные заказчики :( и даже такие дизайны, куда пунктир ну никак не вписывается. Тогда, если картинка не очень большая, наверное, есть смысл делать третье состояние для :focus... Одна надежда, что с повальным переходом на тачскрины и "таблетки" про клавиатурную навигацию можно будет забывать со спокойной совестью :)
#4
Moony (Елена Лунная)

15.01.2010 21:45:18
Вообще я про клавиатурную навигацию вспоминаю в трёх случаях:
- Когда мне нужно расставить taborder у формы
- Когда мне нужно специально скрыть какие-то элементы от доступа с клавиатуры, например при добавлении overlay-слоя который закрывает что-то от мышки.
- Ну и при обработке горячих клавиш в в каком-либо скрипте.
В остальных случаях я полагаюсь на нативную поддержку браузера.
#5
6038103@ (Alex Petrov)

26.01.2010 21:44:41

"Заключение: два этих фикса позволят приблизитЬся..."
#6
Moony (Елена Лунная)

27.01.2010 03:21:34

Спасибо, поправила.
#7
leoneso@ (Павел Левин)

31.10.2011 15:09:56

Всё из-за автозаполнения форм.
Решение: autocomplete="off"
Банальный html тег.
#8
Елена Лунная

31.10.2011 16:24:10

Павел, вы готовы убить польвателю возможность сохранять пароли?

Чтобы оставить комментарий нужно зарегистрироваться или войти.
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID

Об идеальных дизайн-макетах и дизайнерах

Предсказание тенденций веб-разработки на 2010й

13 января 2010 :Меняем цвета Input в Google Chrome

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

15 самых популярных статей:

Оставить комментарий как: Гость:
Сообщение: