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

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

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

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

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

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

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

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

Читать

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...

Читать

CSS media query - ошибка в округлениях

Март 26, 2025 г.

Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов. К примеру, следующее правило может не срабатывать при значении 767 пикс: [crayon-69e6473d7bf86432568130/] Источниками проблем являются фича масштабирования и ...

Читать

Квантование ширины: способ балансировать текст в кнопках на CSS

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

Иногда кнопки на сайте содержат очень разный по длине текст. С коротким текстом всё просто: он помещается в одну строку и выглядит аккуратно. Но как только ...

Читать
 

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

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



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