Удалить Safari / Chrome textinput / textarea glow

Изменить (11 лет спустя): не делайте этого, если только вы не собираетесь предоставить запасной вариант, чтобы указать, какой элемент активен. В противном случае это вредит доступности, поскольку по существу удаляет указание, показывающее, какой элемент в документе имеет фокус. Представьте, что вы пользуетесь клавиатурой и не знаете, с каким элементом вы можете взаимодействовать. Пусть здесь доступность превыше эстетики.

textarea, select, input, button { outline: none; }

Хотя утверждалось, что сохранение свечения / контура на самом деле полезно для доступности, так как может помочь пользователям увидеть, какой элемент в настоящее время находится в фокусе.

Вы также можете использовать псевдоэлемент ': focus' только для нацеливания на входы, когда пользователь их выбрал.

Демо: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Этот эффект может возникать и для элементов, не являющихся входными. Я нашел следующие работы как более общее решение

:focus {
  outline-color: transparent;
  outline-style: none;
}

Обновление. Возможно, вам не придется использовать селектор :focus. Если у вас есть элемент, скажем <div id="mydiv">stuff</div>, и вы получаете внешнее свечение на этом элементе div, примените его как обычно:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

При изменении размера текстового поля в браузерах на основе webkit:

Установка max-height и max-width в текстовой области не приведет к удалению визуального маркера изменения размера. Пытаться:

resize: none;

(и да, я согласен с «старайтесь не делать ничего, что нарушает ожидания пользователя», но иногда это имеет смысл, например, в контексте веб-приложения)

Чтобы настроить внешний вид элементов формы webkit с нуля:

-webkit-appearance: none;

Я испытал это на div, у которого было событие щелчка, и после нескольких 20 поисков я нашел этот фрагмент, который спас мне жизнь.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Это отключает выделение кнопок по умолчанию в мобильных браузерах webkit

Карл В.:

Этот эффект может возникать и для элементов, не являющихся входными. Я нашел следующие работы как более общее решение

:focus {
  outline-color: transparent;
  outline-style: none;
}

Я объясню это:

• :focus означает, что он стилизует элементы, находящиеся в фокусе. Итак, мы стилизуем элементы в фокусе.
• outline-color: transparent; означает, что синее свечение прозрачно.
• outline-style: none; делает то же самое.

Это решение для людей, которые заботятся о доступности.

Пожалуйста, не используйте outline:none; для отключения контура фокуса. Вы убиваете доступность сети, если делаете это. Есть доступный способ сделать это.

Прочтите эту статью, которую я написал, чтобы объяснить, как удалить границу доступным способом.

Вкратце идея состоит в том, чтобы показывать рамку контура только при обнаружении пользователя клавиатуры. Как только пользователь начинает использовать свою мышь, мы отключаем контур. В результате вы получаете лучшее из двух.

Если вы хотите убрать свечение кнопок в Bootstrap (что, на мой взгляд, не обязательно является плохим UX), вам понадобится следующий код:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Это решение сработало для меня.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

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

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

Я счел полезным удалить контур на кнопке ввода типа «раздвижная дверь», потому что контур не закрывает правую «шапку» изображения раздвижной двери, что делает состояние фокусировки немного шатким.

input.slidingdoorbutton:focus { outline: none;}

Мне просто нужно было удалить этот эффект из полей ввода текста, и я не мог заставить другие методы работать правильно, но это то, что у меня работает;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Проверено в Firefox и Chrome.

Конечно! Вы также можете удалить синюю рамку со всех элементов HTML, используя *

*{
    outline-color: transparent;
    outline-style: none;
  }

И

 *{
     outline: none;   
   }