Убираем пунктирную рамку вокруг элементов в фокусе. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

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

Задача

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

Теория

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

    

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

 

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

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

Для ссылок все просто - добавляем в начало основного или css-файла правило:

  1. :focus {  
  2. outline: none;  
  3. }

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

  1. button::-moz-focus-inner,  
  2. input[type="reset"]::-moz-focus-inner,  
  3. input[type="button"]::-moz-focus-inner,  
  4. input[type="submit"]::-moz-focus-inner,  
  5. input[type="file"] > input[type="button"]::-moz-focus-inner {/* */
  6. border: none;  
  7. }

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

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

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

  1. :focus {  
  2. -moz-outline: 3px solid #fff !important;  
  3. }  
  4. input[type="radio"]:focus {  
  5. -moz-outline-radius: 12px !important;  
  6. -moz-outline-offset: 0px !important;  
  7. }

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

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

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

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

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

Плюсы:

  • все просто;
  • работает почти для всех элементов.
Недостатки:
  • нельзя попасть на элемент с помощью клавиатуры (tab обход);
  • работает только при включенном Javascript;
  • "загрязняет" код.
Более привлекательный вариант с точки зрения чистоты кода - подключить скрипт:

  1. <head>  
  2. ...  
  3. <script type="text/javascript">  
  4. onload = function() {  
  5. a_tags=document.getElementsByTagName("input")  
  6. for (i=0;i<a_tags.length;i++) {  
  7. a_tags[i].onfocus=blur_links
  8. }}  
  9. function blur_links() {  
  10. this.blur()  
  11. }  
  12. </script>  
  13. ...  
  14. </head>

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

  1. <head>  
  2. ...  
  3. <script type="text/javascript" src="path-to/jquery.js"></script>  
  4. <script type="text/javascript">  
  5. jQuery(document).ready(function(){  
  6. jQuery("input").focus(  
  7. function(){  
  8. this.blur();  
  9. });  
  10. });  
  11. </script>  
  12. ...  
  13. </head>

Дата публикации: 06.07.2010
Евгений Рыжков,
xiper.net


Комментарии:
  1. dominika: Убираем рамку вокруг input type="checkbox" - с помощью одного CSS не получается убрать рамку вокруг radio-кнопок... Для button type="submit" CSS работает. Вообще непонятно зачем такой стиль:
    Добавлен: 2010-08-05

  2. dominika: Вообще непонятно зачем такой стиль:
    Добавлен: 2010-08-05


   Ваш псевдоним:
Ваш комментарий:

Календарь событий


Новости Интернет


Поиск





Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


 
Copyright © 2006-2024, wb0.ru