Удалить текстовый ввод Safari / Chrome / текстовое свечение

Question

Мне интересно, возможно ли удалить стандартное сине-желтое свечение, когда я нажимаю на область ввода текста / текста с помощью CSS?

Answer 1

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

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

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

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

Answer 2

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

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

---

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

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

Answer 3

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

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

resize: none;

(и да, я согласен с "стараться избегать действий, которые нарушают ожидания пользователя", но иногда это имеет смысл, т. Е. В контексте веб-приложения)

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

-webkit-appearance: none;

Answer 4

Карл W :

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

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

И

 *{
     outline: none;   
   }

Answer 10

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

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

    }

Протестировано в Firefox и в Chrome.