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

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

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

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

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

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

Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

Июль 15, 2025 г.

В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими. EM - размер относительно размера шрифта родителя [crayon-6a36e88a1324e121737121/] 2em внутри .child ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать
 

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

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



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