etxt banner 468x60etxt banner 728x90etxt banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

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

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

etxt banner 480x320etxt banner 728x90etxt banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как добавить CSS стили к элементу с дата атрибутом в HTML

Чтобы добавить CSS к <div> с определённым data атрибутом, можно использовать селектор атрибутов в вашем CSS-файле. Вот как это сделать: Объяснение Пример Вот пример, который добавляет стили к вашему <div>: В этом примере <div> с атрибутом data-container=»outer» будет иметь светло-серый фон, рамку и отступы. Текст внутри <div> будет выровнен по центру.
Подробнее

Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS

Вы можете использовать CSS-свойство transition, чтобы плавно анимировать background-color элемента при наведении курсора мыши. Давайте посмотрим пример, чтобы понять, как это работает:
Подробнее