В браузере ie при фокусе появляется пунктирная рамка вокруг элемента как от нее избавиться

Обновлено: 07.07.2024

Убрать рамку вокруг элемента формы при получении им фокуса в браузерах Safari и Chrome.

Решение

В браузерах Safari и Chrome вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле (рис. 1). Если по дизайну свечение не требуется, его можно убрать, добавив свойство outline со значением none к селектору input:focus . Псевдокласс :focus говорит о том, что стиль применяется к элементу получившим фокус.

Рис. 1. Свечение вокруг текстового поля в Safari

HTML5 CSS 2.1 IE Cr Op Sa Fx

Поскольку в других браузерах не возникает свечения вокруг полей формы при получении фокуса, приведенный стиль никак в них себя не проявит.

Задача

Избавиться от пунктирной рамки вокруг элементов, получивших фокус (ссылки, кнопки, чексбоксы, радиобатоны).

Теория

Замечали наверное, что при клике по кнопке или ссылке, вокруг этих элементов появляется пунктирная рамка.

Это функция браузера, которая выделяет элемент для большего удобства пользователя. Вроде эта рамка никому особо не мешает, но вот незадача — она не всегда вписывается в задумку дизайнера и приходиться от нее избавляться.

Решение с помощью CSS

Убираем рамку вокруг ссылок

Для ссылок все просто — добавляем в начало основного или reset.css правило:

Убираем рамку вокруг кнопок

Работает для и для .

Детальней об этом можно прочитать тут.

Решение с помощью Javascript

все просто
работает почти для всех элементов

нельзя попасть на элемент с помощью клавиатуры (tab обход)
работает только при включенном Javascript
«загрязняет» код

Более привлекательный вариант с точки зрения чистоты кода — подключить скрипт:

С библиотекой jQuery:

Заметка

Update 23.01.2011 Помни, что убирая дефолтную рамку фокуса, хорошей практикой является замена эквивалентом в стиле дизайна.

Как убрать бордер у input:focus . Используется Bootstrap. Стили вида input:focus не работают.

1 ответ 1

Свойство border — не единственный способ задать обводку элемента. В вашем случае обводка задаётся с помощью outline. Отключите его.