Как создать правило CSS, чтобы отменить другой фон на узле ::selection
Мы используем некоторый код, который внедряет CSS непосредственно в документ, который изменяет свойство фона для некоторых элементов с помощью селектора ::selection.
На самом деле мы не можем изменить этот код, но для некоторых элементов мы хотим вернуть их состояние обратно, чтобы они выглядели/вели себя так, как будто фон ::selection не был установлен.
Изменить фон при выделении легко, я могу просто сделать:
::selection { background: red; }
Сделать фон всего выделенного текста красным, но, похоже, нет способа стилизовать элементы так, как будто к ним никогда не применялся стиль ::selection.
Очевидным решением было бы ::selection { background:initial; }, но оно не работает, поскольку при этом фон становится прозрачным, что делает выделение текста невидимым.
<style>
div::selection { background-color:red; }
/** Here I need something which undo the rule setting the
background-color to red on selection
*::selection { background-color:initial !important; } does set the background on selection to transparent.
*/
</style>
<div>This is text</div>Отвечает ли это на ваш вопрос? Как сбросить цвет фона ::выбора
Это хороший вопрос, но я не уверен, что это действительно работает. Похоже, что он меняет цвет выделения в Safari, но похоже, что он устанавливает неправильное значение альфа, потому что, когда текста много, разные выбранные элементы окрашиваются по-разному. Точно такая же проблема, как описана здесь: stackoverflow.com/questions/71567352/… Я изучу проблему, чтобы узнать, могу ли я это исправить.
Ответы 2
Если вам нужно установить для какого-либо свойства значение по умолчанию, вы можете использовать ключевое слово initial. Как указано в документах:
Ключевое слово
initialCSS применяет к элементу начальное (или по умолчанию) значение свойства. Его можно применить к любому свойству CSS.
Вот пример с селектором ::selection.
.sel::selection {
background-color: red;
}
.sel {
background-color: initial;
}
::selection {
background-color: red;
}
div::selection {
background-color: initial;
}<div><p>This text is inside a div</p></div>
<p class = "sel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. At in tellus integer feugiat scelerisque varius. Congue nisi vitae suscipit tellus mauris a diam maecenas. Nunc eget lorem dolor sed. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Nunc aliquet bibendum enim facilisis gravida neque convallis a. In egestas erat imperdiet sed euismod nisi porta. Tempor id eu nisl nunc mi ipsum faucibus. Id velit ut tortor pretium viverra suspendisse potenti. Ipsum a arcu cursus vitae congue. Vitae nunc sed velit dignissim sodales ut. Duis ultricies lacus sed turpis tincidunt id aliquet. Tempus egestas sed sed risus pretium. Tortor aliquam nulla facilisi cras fermentum. Volutpat est velit egestas dui id ornare. Penatibus et magnis dis parturient. Egestas integer eget aliquet nibh praesent.</p>Это не работает. Весь текст становится красным в качестве фона при выборе, если я запускаю этот код. Но я не думаю, что это сработает, даже если вы это исправите, потому что инициализация ::selection прозрачна по какой-то странной причине.
Извините, вы имеете в виду, что настоящие символы станут красными? С моей стороны только фон становится красным при выборе и возвращается в исходное состояние при потере выделения. Могу ли я спросить вас, какой браузер вы используете?
Вы ищете SelectedItem и SelectedItemText (https://drafts.csswg.org/css-color-4/#valdef-color-selecteditem)
div::selection {
background-color: red
}
div::selection {
background-color: SelectedItem;
color: SelectedItemText;
}<div>This is text</div>Должно ли это решение полностью поддерживаться каждым браузером? Потому что у меня (Firefox) это не работает
Не уверен, как будет выглядеть минимальный пример, но я кое-что добавил.