Как убрать обводку кнопки css

Как убрать обводку кнопки css

Недавно мне пришлось решать вопрос о том, как убрать обводку при нажатии на кнопки сайта. Проблема эта отображается не во всех браузерах, поэтому, если вы используете Mozilla Firefox, то можете просто не знать о существовании этой неприятности.

В принципе эта штука совершенно безвредна, однако многим она «мозолит» глаз, следовательно, займемся ликвидацией данного недоразумения. Для начала приведу скриншот того, что я имею в виду:

Пример обводки

Важно не путать эту обводку с пунктирной линией, которая появляется при нажатии на ссылки – там другая ситуация. Итак, заходим в админ-панель WordPress и переходим по адресу: Внешний вид → Редактор → style.css. После любой из закрытых фигурных скобок, в файле style.css, необходимо добавить код:

Все, можно проверять, так как досадных выделений больше не будет. Следует понимать, что данное решение исключит появление обводки абсолютно на всех элементах вашего сайта.

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

У кнопок из Bootstrap 3 — при клике на кнопку появляется браузерная обводка (синяя обводка — в Chrome ; и черная пунктирная обводка — в Firefox )

*Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:

Однако в случае именно с кнопками (button) — просто применение стиля :focus не помогает.

Что делать, чтобы убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus ) в Chrome и Firefox?

(*в jsfiddle при клике на кнопку в фаерфоксе — почему-то нежелательная пунктирная обводка не отображается, хотя на самом деле она есть)

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

Ссылка на основную публикацию
Как убрать водяные знаки с pdf файла
We PDF Watermark Remover — инструмент для удаления водяных знаков из PDF-документа. Скачайте его прямо сейчас и улучшите качество своих...
Как соединить ноутбук с ноутбуком
Блог о модемах, роутерах и gpon ont терминалах. Чем прекрасен ноутбук, так это своей мобильностью. Эта черта в первую очередь...
Как соединить обрезанные песни в одну
Соединяйте любимую музыку в один трек Быстрое объединение песен С помощью этого инструмента можно добавить несколько файлов одновременно, поэтому вам...
Как убрать выбор винды при загрузке
Тебя тревожит сообщение «Выберите операционную систему для запуска» на экране твоего компьютера при загрузке? Не знаешь как убрать это сообщение?...
Adblock detector