Для удобства пользователя, браузеры применяют специальные стили к выделенному тексту. Данные стили могут нарушать дизайн, смотреться не гармонично в верстке, и потому нужно иметь возможность изменить или убрать данный эффект.
В моих проектах я сталкиваюсь с необходимостью устранения данной встроенной стилизации для элементов, выполняющих роль -переключателей, кнопок, созданных из не стандартных элементов форм, а запрограммированных для этого элементов html.
В CSS есть специальный псевдокласс, который управляет стилем выделенного фрагмента:
|
|
div::selection { background-color: transparent; } |
В примере выше, показано как сделать фон выделения прозрачным, невидимым.
Данный псевдокласс поддерживает ограниченный набор CSS свойств. Вот их перечень:
- color
- background-color
- cursor
- caret-color
- outline and its longhands
- text-decoration and its associated properties
- text-emphasis-color
- text-shadow
Данная запись опубликована в 12.03.2019 15:08 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Август 11, 2019 г.
Ширина и высота контейнера - независимые параметры, но иногда хотелось бы чтобы связь между ними была, к примеру, для сохранения пропорций контейнера при адаптивной верстке.
Прямой связи в CSS между width и height нет, и нет возможности задать ...
Читать
Май 2, 2025 г.
Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).
Это статья из цикла заметок по ...
Читать
Ноябрь 30, 2021 г.
Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак - разрыв слова, перенос текста на новую строку - рассмотрим, какие директивы даёт нам CSS для управления поведением ...
Читать
Август 6, 2025 г.
Иногда кажется, что position: sticky работает только с top. Указываешь bottom: 0 — и ничего не происходит. Особенно, если пытаешься сделать так, чтобы элемент "прилип" к нижней границе контейнера при прокрутке. Почему так?
На деле position: sticky ...
Читать