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