Как убрать обводку с выделением для текстового поля ввода

Чтобы убрать обводку (outline) со всех полей ввода, вы можете использовать следующий CSS-код:

input {
  outline: none;
}

Этот стиль применяется ко всем элементам <input> на вашей странице и удаляет стандартную обводку, которая появляется при фокусировке на элементе. Если вы хотите сделать то же самое для других типов полей ввода, таких как <textarea> или <select>, вы можете расширить селектор:

input, textarea, select {
  outline: none;
}

Однако будьте осторожны: удаление обводки может повлиять на доступность вашего сайта. Убедитесь, что пользователи все еще могут четко видеть, на каком элементе управления они находятся, например, с помощью изменения цвета фона или рамки при фокусировке.

Это меня довольно долго сбивало с толку, пока я не понял, что линия на самом деле не является ни границей, ни контуром — это тень. Поэтому, чтобы удалить её, мне пришлось использовать следующее:

input:focus, input.form-control:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Это старая тема, но для справки важно отметить, что отключение контура элемента ввода не рекомендуется, так как это ухудшает доступность.

Свойство outline имеет свое предназначение – оно предоставляет пользователям ясный индикатор фокуса клавиатуры. Для дальнейшего чтения и дополнительных источников по этой теме вы можете обратиться к следующей ссылке: http://outlinenone.com/

Единственное решение, которое сработало для меня

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

input[type="text"]:focus {
    box-shadow: 0 0 0 rgb(255, 255, 255);
}

input[type="checkbox"]:focus {
    box-shadow: 0 0 0 rgb(255, 255, 255);
}

:focus-visible

Хорошие новости для доступности – Chrome и Firefox добавили поддержку :focus-visible.

Скрытие стилей фокуса является плохой практикой из-за требований доступности (навигация с клавиатуры), что делает ваши веб-сайты менее доступными.

Используйте псевдокласс :focus-visible и позвольте браузеру определять, когда применять фокус.

:focus-visible /* Chrome */

Обратите внимание, что Firefox поддерживает аналогичную функциональность через более старый префиксированный псевдокласс:

:-moz-focusring /* Firefox */

Пример стилей:

button {
  color: #000;
  background-color: #fff;
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 4px;
}

button:focus {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

button:hover {
  background-color: #eee;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, 
button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

Пример HTML-кода:

<p>Нажмите кнопку с помощью мыши. Затем попробуйте переключиться на кнопку с помощью клавиши Tab.</p>
<button>без :focus-visible</button>
<button class="with-focus-visible">с :focus-visible</button>

Дополнительная информация:

• Документация на MDN
• Спецификации W3