Selecting text without custom ::selection styling changed the foreground color of the selected content. This was especially visible for links, where the text changed color but the underline did not. The default selection style supplied both a selection background and a foreground color from the palette or HighlightText system color. That made ordinary selections behave as if the page had explicitly styled ::selection color. Only provide a default selection background, so selected content keeps its own foreground color unless CSS overrides it. Remove the now-unused SelectionText palette role.
16 lines
537 B
HTML
16 lines
537 B
HTML
<!DOCTYPE html>
|
|
<style>
|
|
img { width: 50px; height: 50px; vertical-align: middle; }
|
|
.selected { background: rgba(101, 2, 0, 0.8); color: black; }
|
|
.img-wrapper {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
}
|
|
.img-wrapper .overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(101, 2, 0, 0.8);
|
|
}
|
|
</style>
|
|
<p><span class="selected">before image </span><span class="img-wrapper"><img src="../data/smiley.png"><span class="overlay"></span></span><span class="selected"> after image</span></p>
|