НейроАгент

Удаление рамки фокуса в Chrome с помощью CSS

Полное руководство по удалению рамок фокуса из полей ввода в Chrome с помощью CSS. Включает советы по доступности, кроссбраузерные решения и альтернативные индикаторы фокуса.

#chrome-css-hacks#cross-browser-css#css-focus-styles#form-design#input-field-styling#outline-removal#web-accessibility
Вопрос

Как удалить границу фокуса (outline) вокруг текстовых/вводимых полей в Chrome?

Я пытаюсь удалить оранжевую или синюю границу (outline), которая появляется вокруг текстовых/вводимых полей, когда они активны. Похоже, это специфическое поведение Chrome, которое указывает на то, что поле ввода находится в фокусе. Вот CSS, который я сейчас использую:

css
input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

Как я могу изменить этот CSS, чтобы удалить контур фокуса, сохраняя стилизацию поля ввода?

НейроАгент

Чтобы удалить границу фокуса (outline) вокруг текстовых/вводимых полей в Chrome, вы можете добавить свойства CSS, которые переопределят стили фокуса браузера по умолчанию. Самое простое решение — добавить outline: none; в ваше правило CSS для input, что полностью удалит синий или оранжевый контур, который появляется при фокусе на поле ввода.

css
input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline: none; /* Это удаляет контур фокуса */
}

Для более комплексного контроля, особенно при работе с Bootstrap или другими фреймворками, можно использовать этот расширенный подход:

css
input:focus {
    outline: none !important;
    outline-width: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: inherit;
}

Содержание

Почему Chrome отображает контуры фокуса

Синий или оранжевый контур, который появляется вокруг полей ввода в Chrome, является поведением браузера по умолчанию, предназначенным для указания, какой элемент в данный момент имеет фокус клавиатуры. Это особенно важно для навигации с клавиатуры и целей доступности. Chrome использует свойство -webkit-focus-ring-color, которое варьируется в зависимости от операционной системы:

  • В Windows: обычно синий (#4d90fe или rgb(77, 144, 254))
  • В macOS: варьируется между графитовым и синим в зависимости от настроек системы
  • Стиль по умолчанию: outline: -webkit-focus-ring-color auto 5px;

Базовые решения CSS

Простое удаление контура

Наиболее прямой подход:

css
input:focus {
    outline: none;
}

Это полностью удаляет контур фокуса, но может повлиять на доступность.

Полное переопределение фокуса

Для более полного контроля:

css
input:focus {
    outline: none !important;
    outline-width: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: inherit;
}

Это решение обрабатывает как свойство outline, так и любые специфичные для браузера тени box-shadow, которые могут создавать визуальные индикаторы фокуса.

Расширенные решения для разных сценариев

Для фреймворка Bootstrap

Если вы используете Bootstrap, вам нужно переопределить их стили фокуса по умолчанию:

css
.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

Для разных типов полей ввода

Чтобы удалить контуры со всех типов полей ввода, включая кнопки:

css
input:focus, 
button:focus, 
textarea:focus, 
select:focus {
    outline: none;
}

Для конкретных типов полей ввода

Когда вы хотите нацеливаться на определенные типы полей ввода:

css
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    box-shadow: none;
}

Соображения доступности

Удаление контуров фокуса может создать проблемы доступности для пользователей клавиатуры, которые полагаются на визуальные индикаторы для навигации по формам. Рассмотрите эти альтернативы:

Используйте :focus-visible вместо этого

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

css
input:focus {
    outline: none;
}

input:focus-visible {
    outline: 2px solid #4d90fe;
    outline-offset: 2px;
}

Предоставьте пользовательские индикаторы фокуса

Замените контур по умолчанию на пользовательский визуальный индикатор:

css
input:focus {
    outline: none;
    border-color: #4d90fe;
    box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.3);
}

Сохраняйте индикаторы фокуса для пользователей клавиатуры

Различайте фокус от мыши и клавиатуры:

css
input:focus {
    outline: none;
}

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

input:focus-visible {
    outline: 3px solid #4d90fe;
    outline-offset: 1px;
}

Совместимость между браузерами

Для последовательного поведения в разных браузерах:

css
input:focus {
    outline: none !important;
    outline-width: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border-color: inherit;
}

Это обрабатывает браузеры WebKit (Chrome, Safari), Gecko (Firefox) и Presto (Opera).

Альтернативные индикаторы фокуса

Если вы хотите заменить контур по умолчанию на пользовательский стиль фокуса:

Подсветка границы

css
input:focus {
    outline: none;
    border: 2px solid #4d90fe;
    border-radius: 2px;
}

Эффект тени

css
input:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(77, 144, 254, 0.5);
}

Изменение фона

css
input:focus {
    outline: none;
    background-color: rgba(77, 144, 254, 0.1);
}

Решения, специфичные для Bootstrap

При работе с Bootstrap 3.x или более поздними версиями используйте этот подход:

css
.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

Или для более полного переопределения Bootstrap:

css
.form-control:focus,
.form-control:active {
    border-color: inherit !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    outline-offset: none !important;
}

Помните, что хотя удаление контуров фокуса достигает вашей визуальной цели, важно учитывать доступность и предоставлять альтернативные визуальные индикаторы для пользователей навигации с клавиатуры. Псевдокласс :focus-visible — это современный подход для различия фокуса от мыши и клавиатуры.

Источники

  1. Stack Overflow - Как удалить границу фокуса (outline) вокруг текстовых/вводимых полей? (Chrome)
  2. W3Docs - Как удалить и стилизовать границу вокруг текстовых полей ввода в Google Chrome
  3. Tutorial Republic - Как удалить контур вокруг текстовых полей ввода в Chrome с помощью CSS
  4. GeeksforGeeks - Как удалить границу фокуса (outline) вокруг текстовых/вводимых полей?
  5. Sentry - Как удалить границу фокуса (outline) вокруг текстовых/вводимых полей
  6. MDN - :focus-visible
  7. CSS-Tricks - Копирование нативных стилей фокуса браузера
  8. TJ VanToll - Прекратите возиться с контуром фокуса браузера по умолчанию

Заключение

Чтобы удалить границы фокуса с полей ввода в Chrome, используйте outline: none; в сочетании с box-shadow: none; и -webkit-box-shadow: none; для полного удаления. Хотя это достигает вашей визуальной цели, учтите доступность, предоставляя альтернативные индикаторы фокуса с помощью :focus-visible или пользовательских визуальных подсказок. Для пользователей Bootstrap переопределите стили фокуса form-control по умолчанию с наследованием цвета границы и удалением тени. Всегда тестируйте навигацию с клавиатуры, чтобы убедиться, что ваши формы остаются доступными для всех пользователей.

Как создать пользовательские индикаторы фокуса для лучшей доступности?В чем разница между :focus и :focus-visible в CSS?Как удалить рамки фокуса в браузерах Firefox и Safari?Почему я должен сохранять индикаторы фокуса соображений доступности?Как стилизовать поля ввода для лучшего пользовательского опыта?Какие лучшие практики для стилизации полей форм в современном веб-дизайне?
Спросить у NeuroAgent