Как убрать подсветку (выделение) заполненного поля input в браузере?

Несмотря на следующие CSS-правила: <br/> <pre><code class="css">input, input:selection, input:focus {
  • 31 марта 2026 г. 9:00
Ответы на вопрос 2
Нужно понять, что "подсветка" может быть разная и убирается по‑разному:
- фокусная обводка (outline / box‑shadow) при клике или табе;
- выделение текста (::selection);
- жёлтая заливка автозаполнения в Chrome (:-webkit-autofill).

Примеры CSS для каждого случая:

1) Убрать стандартную обводку при фокусе:
input:focus {
  outline: none;
  box-shadow: none;
}

2) Убрать цвет выделенного текста:
input::selection,
textarea::selection {
  background: transparent; /* или любой цвет */
}

(обратите внимание: не `input:selection`, а `::selection`)

3) Убрать заливку автозаполнения в Chrome:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
}

Без !important иногда браузер перебивает ваши правила.

Рекомендация по доступности: полностью убирать видимый фокус — плохая практика, т.к. это затрудняет навигацию с клавиатуры. Вместо этого используйте более мягкую кастомную индикацию и/или селектор :focus-visible:

input:focus { outline: none; }
input:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

Если приведённые правила не работают — покажите конкретный пример HTML/CSS и укажете браузер, помогу точнее.
<a href="https://habr.com/ru/articles/695194/" rel="nofollow">https://habr.com/ru/articles/695194/</a>
Похожие вопросы