Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8">
<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title>
<style>
span.forcedColors {
background-color: Highlight;
color: HighlightText;
text-decoration: underline;
text-decoration-color: HighlightText;
forced-color-adjust: none;
}
span.noForcedColors {
background-color: yellow;
color: blue;
text-decoration: underline;
text-decoration-color: orange;
forced-color-adjust: none;
}
</style>
<body>
<div><span class="forcedColors">This content doesn't have forced-color-adjust set at all</span></div>
<div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element only</span></div>
<div><span class="forcedColors">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div>
<div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div>
</body>