Удалить настройку Safari / Chrome textinput / textarea

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

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

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

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

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

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

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

Обновление. Возможно, вам не придется использовать селектор :focus . Если у вас есть элемент, скажите

stuff

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

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

При изменении размера textarea в браузерах на основе webkit:

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

 resize: none; 

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

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

 -webkit-appearance: none; 

Carl W :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 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; } 
  • Как выполнить базовую проверку подлинности для FirefoxDriver, ChromeDriver и IEdriver в Selenium WebDriver?
  • Как отключить подсветку выделения текста?
  • Поддержка браузера .SVG
  • Как вернуть «Режим браузера» в IE11?
  • Не удалось загрузить ресурс в Chrome
  • Поддержка браузера для номеров страниц CSS
  • Доступны ли методы PUT, DELETE, HEAD и т. Д. В большинстве веб-браузеров?
  • Почему это не так: побывал в стиле css?
  • Что такое WebKit и как это связано с CSS?
  • Force IE8 В режим совместимости IE7
  • HTML5 аудио не работает в Firefox
  • Давайте будем гением компьютера.