Как удалить контур вокруг полей ввода текста в Chrome с помощью CSS
В браузере Google Chrome элементы управления формы, такие как <input>
, <textarea>
и <select>
, выделяются синим контуром при фокусе. Это поведение хрома по умолчанию, однако, если оно вам не нравится, вы можете легко удалить его, установив для свойства outline
значение none
.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Input Highlighting in Chrome with CSS</title>
<style>
input:focus, textarea:focus, select:focus{
outline: none;
}
</style>
</head>
<body>
<form>
<input type="text">
<hr>
<textarea></textarea>
<hr>
<select>
<option>Select</option>
</select>
</form>
</body>
</html>
Однако рекомендуется применить альтернативный стиль, чтобы визуально показать пользователю, что элемент управления формы имеет фокус. Это сделает ваш сайт более доступным и удобным для пользователей.