Css input focus border убрать

Css input focus border убрать

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+

Задача

Убрать рамку вокруг элемента формы при получении им фокуса в браузерах Safari и Chrome.

Решение

В браузерах Safari и Chrome вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле (рис. 1). Если по дизайну свечение не требуется, его можно убрать, добавив свойство outline со значением none к селектору input:focus . Псевдокласс :focus говорит о том, что стиль применяется к элементу получившим фокус.

Рис. 1. Свечение вокруг текстового поля в Safari

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Выделение активных элементов форм в Safari и Chrome применяется не только к текстовым полям, но и к другим элементам. Чтобы убрать свечение только для определенных элементов, в данном примере используется конструкция input[type="text"] , которая говорит: «использовать стиль для тегов только с атрибутом type равным text ».

Задача

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

Теория

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

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

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

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

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

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

Работает для и для .

Читайте также:  Cooler master mastercase mc500
Убираем рамку вокруг input type="radio"

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

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

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

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

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

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

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

Заметка

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

Как убрать бордер у input:focus . Используется Bootstrap. Стили вида input:focus < border: none; >не работают.

1 ответ 1

Свойство border — не единственный способ задать обводку элемента. В вашем случае обводка задаётся с помощью outline. Отключите его.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css bootstrap input focus или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Ссылка на основную публикацию
Adblock detector