Змінюємо кольори Input у Google Chrome
Оскільки в процесі верстки я перевіряю результат у всіх браузерах, я не могла не помітити, що в Chrome (і ін. Webkit) дуже некрасиво поводяться поля введення. По-перше, у них з'являється дуже негарне обведення при натисканні на них. По-друге, для збережених даних Хром підсвічує форму введення мерзенним жовтим кольором, причому у разі заданого білого кольору шрифту все зовсім не читабельно (див. картинку нижче). Як це виправити?
Хром і Сафарі - розуміють селектор *: focus. Саме він відповідає за поведінку того, як поводиться поле введення при фокусі. Для цього необхідно встановити йому значення
І поля при кліку на них не підсвічуватимуться рамкою.
Баг з підсвічуванням збережених полів введення в webkit відомий вже давно і був повідомлений розробникам Chrome півтора роки тому. Ті його закрили із резолюцією WontFix. Це, мовляв, порушує звичну користувачеві поведінку (behavior) браузера.
У самому движку webkit жорстко забитий наступний CSS:
Це не дозволяє змінити колір засобами CSS. Покращення було знайдено одним із учасників, необхідно на початку файлу стилів додати
Це дозволить хрому замінити ще колір для автозаповнених полів, примусово на чорний.
Висновок: ці два фікси дозволять наблизитися до поведінки інших браузерів і поліпшити читабельність у разі світлих кольорів шрифтів.
Коментарі:
Велике спасибі за нагадування про цю важливу дрібницю та корисні поради!
Так. Справжня думка. Щоправда у мене в одному проекті замовники принципово просили "прибрати пунктир у посилання-картинки при кліку", довго шукала як це зробити.
Угу, бувають такі несвідомі замовники: (і навіть такі дизайни, куди пунктир ну ніяк не вписується. Тоді, якщо картинка не дужевелика, напевно, є сенс робити третій стан для: focus. Одна надія, що з повальним переходом на тачскрини та "таблетки" про клавіатурну навігацію можна буде забувати зі спокійною совістю:)
Взагалі я про клавіатурну навігацію згадую у трьох випадках:
- Коли мені потрібно розставити taborder біля форми
- Коли мені потрібно спеціально приховати якісь елементи від доступу з клавіатури, наприклад, при додаванні overlay-шару, який закриває щось від мишки.
- Ну і при обробці гарячих клавіш у якомусь скрипті.
6038103@ (Alex Petrov)
"Висновок: два цих фікси дозволять наблизитиЬся."