Убираем рамку с эл-ов в фокусе

Автор: Евгений Рыжков Дата публикации:

Задача

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

Теория

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

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

Пунктирная линия вокруг кнопки Пунктирная линия вокруг ссылки-логотипа

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

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

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

:focus {
outline: none;
}

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

Метод подсмотрен тут.

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {/* */
border: none;
}

Работает для <button> и для <input>.

Убираем рамку вокруг input type="radio"

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

:focus {
-moz-outline: 3px solid #fff !important;
}
input[type="radio"]:focus {
-moz-outline-radius: 12px !important;
-moz-outline-offset: 0px !important;
}

Убираем рамку вокруг input type="checkbox"

input[type="checkbox"]:focus {
-moz-outline-offset: -1px !important;
-moz-outline: 1px solid #000 !important;
}

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

Добавляем в HTML элементу, у которого хотим убрать рамку onfocus="this.blur();".

<button type="button" onfocus="this.blur();">Кнопка</button>
<input type="file" onfocus="this.blur();" />

Плюсы:

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

Недостатки:

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

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

<head>
...
<script type="text/javascript">
onload = function() {
a_tags=document.getElementsByTagName("input")
for (i=0;i<a_tags.length;i++) {
a_tags[i].onfocus=blur_links
}}
function blur_links() {
this.blur()
}
</script>
...
</head>

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

<head>
...
<script type="text/javascript" src="path-to/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input").focus(
function(){
this.blur();
});
});
</script>
...
</head>

Заметка

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

Xiper