Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Css Tricks/ Убираем пунктирную рамку вокруг элементов в фокусе с помощью CSS и Javascirpt

Убираем пунктирную рамку вокруг элементов в фокусе

Дата публикации: 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>