Изменение синего свечения при фокусе в Bootstrap: CSS код

Быстрый ответ

Если хочется избавиться от синей подсветки при фокусе на элементах ввода Bootstrap, стоит использовать свойство box-shadow: none;. Если же вы хотите подсветку при фокусе другого цвета, укажите box-shadow: 0 0 0 0.2rem rgba(ВашЦвет, Прозрачность);.

input:focus {
  box-shadow: none; /* Так подсветка остается в прошлом */
}

/* Или для подсветки фокуса выбранным цветом, например, красным с прозрачностью 25% */
input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); /* Словно вспышка красной световой ракеты! */
}

Для корректного отображения изменений убедитесь, что ваши стили подключены после bootstrap.css.

Руководство по детализированной стилизации

Выбирая стиль фокуса для элементов ввода, мы заботимся не только о визуальной гармонии проекта, но и о его доступности.

Создание визуального единства

Стили фокуса, заданные в Bootstrap, затрагивают <input>, <textarea> и <select>. Внеся изменения в эти стили, нам нужно обеспечить их однородность:

.form-control:focus {
  border-color: #ced4da; /* Обновляем рамку до более сдержанного стиля */
  outline: none; /* Стандартный контур мы отправляем в архив */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Меняем атмосферу с помощью теней */
}

Подробнее об этом расскажет наш спикер на видео

Зона применения стилей

Применяйте индивидуальные стили к определенным элементам или классам, чтобы ваши модификации были целенаправленными и локализованными:

input.my-custom-input:focus {
  box-shadow: none; /* Эффекты воздействия выключим */
  border-color: #ff7518; /* Обрамление в апельсиновых тонах */
}

Бонусы использования Sass

Работая с Bootstrap и Sass, можно внести локальные изменения, редактируя переменные в _variables.scss или создавая настраиваемые @mixin, что существенно упростит процесс:

$primary:    #007bff; // Лазурное небо для вашей страницы
$input-focus-border-color: lighten($primary, 20%); // И мягкий оттенок для наших лазурных "облаков"

Не забудьте скомпилировать файлы Sass в CSS перед их публикацией.

Визуализация

Примеры визуальных изменений подсветки элементов ввода в Bootstrap могут быть представлены так:

• 👔 Стандартное видение (выделение по умолчанию)
• 🔵 По умолчанию (синий цвет Bootstrap)
• 🎨 Персонифицированное видение (индивидуальные стили CSS)

Редактирование:

input:focus {
  box-shadow: none; /* Отключаем стандартную синюю подсветку */
  border-color: #FF5733; /* Элемент ввода поджигаем */
}

Результат:

• 👔✂️🎨 Индивидуально наряженный элемент ввода (без стандартного синего, но с стильной рамкой)

Руководство по продвинутой кастомизации

Помимо визуального соответствия, стоит также присмотреться к таким вещам как доступность, совместимость с браузерами, сбалансированность выбора цветов и создание динамичных взаимодействий – всё для улучшения пользовательского опыта.

Полезные материалы

1. Элементы формы · Bootstrap v5.0 — Официальная документация Bootstrap.
2. outline – CSS: Каскадные таблицы стилей | MDN — Подробное описание свойства CSS outline.
3. Как скрыть цвет автозаполнения в Chrome? – Stack Overflow — Хитрости работы со стилями автозаполнения в Chrome.
4. Подождите... – Codepen — Живой пример изменения подсветки элемента формы Bootstrap.
5. html – Изменение синего свечения при фокусе на элементах ввода Bootstrap – Stack Overflow — Обсуждение в комьюнити о замене стандартной подсветки Bootstrap.
6. Дизайн для облегчения взаимодействия – A List Apart — Руководство по созданию удобных для пользователя интерфейсов.