Коротко: «выделение» бывает двух видов: подсветка при выделении текста и «рамка» вокруг элемента при клике/фокусе. Для каждого случая — своё свойство.
Кому и зачемНужно, чтобы убрать синюю подсветку у кнопок и ссылок, изменить цвет выделения текста или запретить выделение на элементах интерфейса. Покажем и про доступность.
Три ситуации
CSS
::selection { background: #003F8F; color: #fff; }Меняет цвета при выделении текста мышью. Набор свойств в браузерах ограничен (в основном цвет/фон).
CSS
.btn:focus-visible { outline: 2px solid #003F8F; outline-offset: 2px; }Это контур фокуса. Убирать его полностью нельзя — он нужен для управления с клавиатуры.
CSS
.no-select { user-select: none; -webkit-user-select: none; }Запрещает выделять текст (например, на кнопках и переключателях).
Практика: три задачи
1. Убрать синюю рамку у кнопки при клике мышью
- Отключите контур только для мыши.
- Оставьте видимый фокус для клавиатуры.
CSS
.btn:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible { outline: 2px solid #003F8F; }2. Красивое выделение текста
CSS
::selection { background: #992222; color: #fff; }3. Запретить выделение на «кнопке-иконке»
CSS
.icon-btn { user-select: none; }ДоступностьПолный отказ от контура фокуса делает интерфейс неудобным для клавиатуры. Всегда оставляйте видимый индикатор — можно свой, брендовый.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Остаётся синяя рамка при клике | это outline, а не border |
:focus:not(:focus-visible){outline:none} |
::selection не работает |
опечатка/специфичность | проверить селектор |
| Текст нельзя выделить | user-select:none унаследован |
вернуть user-select:text нужным элементам |
| Фокус не виден | убрали outline без замены |
вернуть видимый фокус |
Проверьте себя
Чек-лист
Каким свойством убрать «рамку» при клике мышью, сохранив фокус для клавиатуры?
Вопросы и ответы
Псевдоэлемент для стилизации выделенного текста (цвет фона и текста).
Через outline: none для мыши и видимый контур для клавиатуры (:focus-visible).
Чтобы при «двойном клике» по кнопке не выделялся текст. Применяйте точечно.
Пользователи с клавиатурой не увидят, где находятся. Это важный критерий доступности.
Итоги
- Выделение текста —
::selection. - Контур —
outlineв:focus-visible. - Запрет выделения —
user-select: none(точечно).
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.