Убираем подсветку поля при фокусе ввода в Chrome

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть «подсветка» поля, получившего фокус ввода. Смотрим как убрать данный стиль.

Давайте посмотрим специфические стили браузера для случая :focus. Вот что показывают developer tools:

Видно, что рамка подсветки создаётся стилем outline.

Добавим собственный стиль, чтобы переписать установленные браузером:

Мало букафф? Читайте есчо !

CSS-префиксер для изоляции стилей: добавляем класс-обёртку ко всем правилам

Апрель 20, 2026 г.

При разработке крупных проектов или интеграции готовых UI-библиотек часто возникает проблема конфликта имён CSS-классов. Стили одной библиотеки могут неожиданно повлиять на элементы другой, даже если вы старались использовать уникальные имена. Обычно ...

Читать

Верстка слоя-подкладки во всю ширину viewport

Апрель 16, 2019 г.

В лендинговой верстке дизайнеры часто прибегают к следующему приему - фон одного или нескольких блоков растягивается на всю ширину документа. При этом ...

Читать

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Анимация прокрутки в CSS: animation-timeline: scroll()

Сентябрь 1, 2025 г.

Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations. ...

Читать
 

Комментарии к «Убираем подсветку поля при фокусе ввода в Chrome»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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