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

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

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

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

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

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

Как работает position: sticky с bottom: 0 и почему он "не работает"

Август 6, 2025 г.

Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так? На деле position: sticky ...

Читать

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

Апрель 20, 2026 г.

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

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-6a2ff13096edd798700083/] Ключевым является значение auto для левого и правого отступов. ...

Читать
 

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

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



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