CSS: Как убрать обводку у input и textarea без потери доступности

Браузер показывает обводку outline, чтобы пользователь видел, какое поле сейчас находится в фокусе. Полностью убирать её без замены нельзя: при управлении с клавиатуры становится непонятно, куда попадёт ввод после нажатия Tab.

Вместо глобального outline: none лучше изменить стандартную обводку или заменить её заметным сочетанием outline, границы и тени.

Когда решение не подходит: если дизайн не требует собственного оформления фокуса, безопаснее оставить браузерную обводку без изменений.

Рекомендуемый вариант: изменить стандартную обводку

Такой вариант сохраняет хорошо заметный фокус и не меняет размеры элемента:

input:focus,
textarea:focus {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
	border-color: #2563eb;
}

Свойство outline рисуется поверх макета и не увеличивает ширину или высоту поля.

Как убрать стандартную обводку и заменить своей

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

.formField {
	border: 1px solid #9ca3af;
	border-radius: 4px;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.formField:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgb(37 99 235 / 25%);
}

/* Резервный индикатор для режима высокой контрастности */
@media (forced-colors: active) {
	.formField:focus {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
		box-shadow: none;
	}
}

Пример HTML

<form>
	<p>
		<label for="userEmail">E-mail</label>
		<input
			class="formField"
			type="email"
			id="userEmail"
			name="userEmail"
			autocomplete="email"
			required
		>
	</p>

	<p>
		<label for="userMessage">Сообщение</label>
		<textarea
			class="formField"
			id="userMessage"
			name="userMessage"
			rows="5"
			required
		></textarea>
	</p>

	<button type="submit">Отправить</button>
</form>

Когда использовать :focus-visible

Псевдокласс :focus-visible позволяет браузеру показывать индикатор тогда, когда он особенно нужен пользователю, например при навигации с клавиатуры.

button:focus {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

button:focus:not(:focus-visible) {
	outline: none;
}

button:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

Для текстовых полей браузер может показывать :focus-visible и после клика мышью, потому что дальнейшая работа с полем требует клавиатуры. Это нормальное поведение. Для input и textarea обычно проще оставить заметный стиль обычного :focus.

Так делать не следует

/* Плохо: фокус исчезнет у всех интерактивных элементов */
* {
	outline: none;
}

/* Плохо: у полей нет замены стандартному индикатору */
input:focus,
textarea:focus {
	outline: none;
}

Глобальное правило затронет ссылки, кнопки, поля формы и другие интерактивные элементы. Пользователи клавиатуры не смогут определить текущую позицию фокуса.

Краевые случаи

• Изменение только цвета границы может быть слишком незаметным. Лучше сочетать границу с outline или box-shadow.
• Не меняйте толщину границы при фокусе, если это вызывает смещение размеров поля.
• В режиме высокой контрастности тени могут не отображаться, поэтому полезно оставлять резервный outline.
• Не передавайте состояние только цветом. Ошибку заполнения дополнительно описывайте текстом и связывайте с полем через aria-describedby.
• Элементы с атрибутом disabled обычно не получают фокус.

Доступность и безопасность

Видимый фокус нужен людям, которые перемещаются по странице клавишами Tab и Shift + Tab. Удаление индикатора без замены нарушает доступность интерфейса.

CSS не валидирует и не защищает введённые данные. Значения формы необходимо проверять на сервере независимо от визуальных состояний полей.

Производительность

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

Совместимость

Свойства outline, outline-offset и псевдокласс :focus поддерживаются всеми современными браузерами. :focus-visible также поддерживается актуальными версиями основных браузеров. В примере для кнопки сначала задан резервный стиль через :focus, поэтому заметный индикатор сохранится и в старом браузере.

Как проверить результат

1. Откройте страницу и не используйте мышь.
2. Нажимайте Tab, пока фокус не перейдёт на первое поле.
3. Убедитесь, что текущее поле хорошо заметно на светлом и тёмном фоне.
4. Нажмите Shift + Tab и проверьте обратную навигацию.
5. Проверьте страницу при масштабе 200%.
6. В Windows по возможности включите режим высокой контрастности и убедитесь, что индикатор не исчез.

Альтернативы

• Оставить стандартный браузерный outline — самый простой и надёжный вариант.
• Использовать :focus-within, чтобы подсвечивать весь контейнер поля вместе с подписью и подсказкой.
• Применить единый компонент поля формы, чтобы одинаковый стиль фокуса использовался во всём проекте.

Документация

• MDN: свойство outline
• MDN: псевдокласс :focus-visible
• W3C WCAG: Focus Visible