Для удобства пользователя, браузеры применяют специальные стили к выделенному тексту. Данные стили могут нарушать дизайн, смотреться не гармонично в верстке, и потому нужно иметь возможность изменить или убрать данный эффект.
В моих проектах я сталкиваюсь с необходимостью устранения данной встроенной стилизации для элементов, выполняющих роль -переключателей, кнопок, созданных из не стандартных элементов форм, а запрограммированных для этого элементов 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Апрель 26, 2025 г.
Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).
Это статья из цикла заметок ...
Читать
Сентябрь 19, 2015 г.
Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать!
Можно отказаться, но удобно ведь?
Самый простой выход написать вместо злополучного экспериментального padding-box:
[crayon-69d01e4eb53bc889711082/]
Во ...
Читать
Сентябрь 16, 2015 г.
Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, ...
Читать
Сентябрь 25, 2025 г.
Иногда кнопки на сайте содержат очень разный по длине текст. С коротким текстом всё просто: он помещается в одну строку и выглядит аккуратно. Но как только ...
Читать