Как убрать рамку фокуса css

Рамки и границы

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента ( border внутри);
• outline не влияет на размеры элемента ( border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах ( border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос — в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания различных дизайнерских эффектов.

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании :hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое — заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

Результат данного примера показан на рис. 3.

Рис. 3. Рамки, созданные свойством box-shadow

Источник

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

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

Теория

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

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

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

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

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

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

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 

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

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

:focus < -moz-outline: 3px solid #fff !important; >input[type=»radio»]:focus

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

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

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

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

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

 . onload = function() < a_tags=document.getElementsByTagName("input") for (i=0;i> function blur_links() . 

 .   . 

Заметка

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

• CSS приемы
  • «Дергание» сайта
  • background position со смещением
  • clearfix
  • CSS прозрачность
  • CSS хаки
  • RGBA — CSS полупрозрачность
  • Затемнение фона
  • Кроссбраузерный
    

    ---

  • Обнуление отступов
  • Порядок описания ссылок
  • Прелоад изображений
  • Сброс стилей
  • Сокращения в CSS
  • Убираем рамку с эл-ов в фокусе
  • Условные CSS
  • Условные комментарии
  • Поворот вокруг своей оси
  • Поворот объекта вокруг свой
  • Resize для textarea в Safari и Chrome
  • Блочная верстка форм
  • Кастомные checkbox и radio на CSS
  • Кросбраузерные input и textarea
  • Кроссбраузерный button
  • Нестандартные checkbox
  • Нестандартные radio
  • Нестандартные select
  • Нестандартные select multiple
  • Нестандартные поля выбора файла
  • Нестандартные текстовые поля
  • О кроссбраузерности placeholder
  • Отступы у checkbox и radio
  • Оформление input type=search
  • Резиновая кнопка
  • Текст в поле type=»password»
  • Блоки равной высоты в строке
  • Колонки равной высоты
  • Прижимаем подвал к низу
  • Ресайз окна: потомок перерос родителя
  • Сайт в центре экрана
  • Фиксированная колонка + резиновая + clear:both
  • CSS 3D лента
  • CSS3 всплывающие подсказки
  • IMG внутри блока — убираем странный отступ
  • IMG: меняем рисунок при наведении
  • Аккордеон на чистом CSS3
  • Валидный target=»_blank»
  • Верстка рейтингов
  • Верстка содержания
  • Вставка спецсимволов в генерируемый контент
  • Вставка стрелок
  • Индивидуальные стили для li. Избавляемся от классов.
  • Масштабируемая картинка в резиновой колонке
  • Многоколоночный текст на CSS3
  • Нестандартное подчеркивание
  • Отменяем обтекание текстом картинки
  • Оформление внешних ссылок
  • Оформление изображений по align
  • Оформляем «ol»
  • Правильные анонсы новостей
  • Список определений. Требуем невозможного.
  • Firefox
    • -moz-box-shadow и -moz-border-radius — это кошмар CPU
    • Позиционирование внутри button
    • Ширина input type=file
    • Onload в IE9
    • z-index в IE6-7
    • Баг с текстом при применении Alpha фильтра
    • Масштабирование и PIE
    • Отступы в кнопках в IE6-7
    • Проблемы с em
    • Эмуляция after и before для IE 6-7
    • Эмуляция data:URL для IE6-7 — используем MHTML-включение
    • hasLayout
    • Max-width
    • Min-height
    • Min-width
    • Min-width и max-width одновременно
    • PNG и прозрачность
    • Высота блока 1px
    • Дублирование символов
    • Дырка под футером
    • Как перекрыть select
    • Обрезка контента c отрицательным margin в IE6
    • Отступы плавающих блоков
    • Проблемы с размерами блоков
    • Псевдокласс :first-child
    • Псевдокласс hover в IE 6
    • Селектор потомков >
    • Селекторы атрибутов [type=…]
    • Сестринский селектор
    • Смещение на 1px
    • Ссылки с вложением
    • Устраняем flickering
    • Эмуляция position:fixed
    • overflow-y
    • Не подгружаются шрифты @font-face
    • Проблема с oveflow: hidden
    • Скругление img
    • HTML шаблон для мобильных устройств
    • Выпадающее меню на CSS
    • Выравнивание навигации из блоков по центру
    • Выравнивание навигации по середине
    • Резиновое меню
    • Резиновое меню из блоков
    • Убираем класс для первого элемента
    • Box-sizing: переключаем блочную модель
    • inline-block: простое свойство для непростых задач
    • Вертикальная позиция для строчного элемента
    • Вертикальное выравнивание
    • Выравнивание по центру с position: absolute
    • Вычисляемые отступы
    • Два в одном: позиция + размеры
    • Долой отступы между строчными элементами (и блоками)
    • Обходим схлопывание margin
    • Центрирование картинки в блоке
    • Центрирование резинового блока по горизонтали
    • Активация flash
    • Вставка flash в HTML
    • Вставляем ролик с YouTube
    • Как отключить flash
    • Как перекрыть flash
    • Параметры для вставки объектов
    • Ссылка на flash объекте
    • CSS треугольники
    • Аппаратное ускорение анимации
    • Встраиваем изображения — data:URL
    • Градиент: CSS3 против CSS2 + картинка
    • Лесенка спрайтов — сложный случай поклейки
    • На одну картинку меньше. Спецсимвол ×
    • Необычные тени с CSS3 box-shadow
    • Оптимизация Google Web Fonts
    • Оптимизация фонов с помощью Canvas
    • Проблемы с border-radius
    • Псевдоэлемент before для маркера списка
    • Скругление углов. Обзор методов.
    • Сокращаем HTML5 код
    • Спрайты: меньше картинок — больше скорость
    • Тень для блока
    • Фигуры с углами на CSS
    • Шаблоны градиентов
    • Дополнение Skype
    • Подключить favicon
    • Профилактика сайта: максимально простое оповещение
    • Ссылки на skype
    • @font-face в деталях
    • Cufon — нестандартный шрифт средствами JS
    • font-size: 100.01% для html
    • Безопасные шрифтовые CSS стеки для англоязычных текстов
    • Безопасные шрифтовые CSS стеки для рунета
    • Безопасные шрифты
    • Вертикальный текст
    • Используем псевдоэлемент :first-letter
    • Контур для текста
    • Нестандарный шрифт. Быть ему или нет?
    • Нестандартный шрифт средствами CSS
    • Плавающий :first-letter
    • Подмена текста изображением
    • Соответствия шрифтов Windows, Mac и Unix/Linux
    • Строчный :first-letter
    • Текст под углом
    • Текст с CSS градиентом
    • Тень для текста
    • Эффект отражения

    Источник

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

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

    Теория

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

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

    

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

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

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

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

    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 

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

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

    :focus < -moz-outline: 3px solid #fff !important; >input[type=»radio»]:focus

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

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

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

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

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

     . onload = function() < a_tags=document.getElementsByTagName("input") for (i=0;i> function blur_links() . 

     .   . 

    Заметка

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

    • «Дергание» сайта
    • background position со смещением
    • Clearfix — очищение потока элементов с сохранением структурной верстки
    • CSS хаки для IE6, IE7, Opera, Firefox, Safari, Chrome
    • RGBA — CSS полупрозрачность
    • Кроссбраузерная CSS прозрачность (opacity)
    • Кроссбраузерное полупрозрачное затемнение фона
    • Кроссбраузерный
      

      ---

      | толщина линии, цвет, отступы, выравнивания, бордюры, фон

    • Кроссбраузерный
      

      ---

      | толщина линии, цвет, отступы, выравнивания, бордюры, фон

    • Обнуление отступов (margin / padding) с помощью универсального селектора
    • Порядок описания ссылок
    • Предварительная загрузка изображений
    • Сброс стилей с помощью CSS | Reset CSS с комментариями
    • Сокращения в CSS | минимизируем CSS код
    • Убираем пунктирную рамку вокруг элементов в фокусе с помощью CSS и Javascirpt
    • Условные CSS — намного круче, чем условные комментарии
    • Условные комментарии

    Источник