css убрать выделение input

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

Chrome по умолчанию выделяет поля для заполнения окантовкой(рамкой) при фокусе. Используем селектор *:focus. Именно он отвечает за поведение того как себя ведёт поле ввода при фокусе. Для этого необходимо установить ему значение

Также можно задать цвет поля автозаполнения

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 ».

Появляется обводка при клике на input (он помещен над div с имитацией красивого чекбокса).

9 ответов 9

Любую обводку убрать можно)

Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.

Лучшее решение, которое убирает подсветку любых элементов:

Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap

Допишите также onFocus=»this.blur()» .

Физически обводку убрать никак нельзя, браузер сам ее рисует. Фактически ее можно свернуть в точку, если у элемента A будет стиль не display:block, а display:inline. При этом на активную область это не повлияет, но это плохой вариант. Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.

outline:none; и все

У меня была такая проблема. Я просто сделал так:

Если используете Bootstrap, то, возможно, используется box-shadow.

Попробуйте поставить box-shadow: none;

Защищён участником Дух сообщества ♦ 17 июл ’18 в 20:54 .

Благодарим вас за интерес, проявленный к этому вопросу. Так как он собрал большое количество ответов низкого качества и спама, который пришлось удалить, для публикации ответов теперь необходимо иметь 10 баллов репутации на сайте (бонус за ассоциацию учётных записей не учитывается).

Может быть, вы захотите ответить на один из неотвеченных вопросов?

Оцените статью