Убираем пунктирную рамку вокруг элементов в фокусе
Дата публикации: 31.01.2009
Задача
Избавиться от пунктирной рамки вокруг элементов, получивших фокус (ссылки, кнопки, чексбоксы, радиобатоны).
Теория
Замечали наверное, что при клике по кнопке или ссылке, вокруг этих элементов появляется пунктирная рамка.
 |
 |
 |
 |
Это функция браузера, которая выделяет элемент для большего удобства пользователя. Вроде эта рамка никому особо не мешает, но вот незадача — она не всегда вписывается в задумку дизайнера и приходиться от нее избавляться.
Решение с помощью 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 23.01.2011 Помни, что убирая дефолтную рамку фокуса, хорошей практикой является замена эквивалентом в стиле дизайна.