Как удалить контур вокруг полей ввода текста в 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>

Однако рекомендуется применить альтернативный стиль, чтобы визуально показать пользователю, что элемент управления формы имеет фокус. Это сделает ваш сайт более доступным и удобным для пользователей.

Читайте также

Похожие примеры: