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 правило:

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

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

Читайте также:  Header encoding utf 8
Убираем рамку вокруг 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

Ссылка на основную публикацию
Celeron d 356 характеристики
Средняя цена по России, руб: 1 800 Бенчмарк (метрика производительности) : 321/22309 Показатель производительности процессора. Используется для относительного сравнения моделей....
Be creative refill ink
Чернила высокого качества. Отлично подойдут для всей линейки маркеров. Удобная пипетка для заправки. Пигмент не оседает. 21мл чернил это 9...
Be quiet silent loop 280 мм
Мода на СВО типа All-In-One затронула практически каждого более-менее известного производителя компьютерных систем охлаждения. Добрался этот тренд и до компании...
Cells 1 1 value
Методы Методы также как и свойства, указываются через точку после имени объекта. У методов могут быть аргументы, которые указываются через...
Adblock detector