How to Use CSS3: :Selection Without Changing The Default Color and Background Color

How can I use CSS3 ::selection without changing the default color and background color?

Since this selector is not officially supported for CSS, being removed from CSS3 and not currently in the draft for CSS4, there really isn't much documentation on how exactly the selector should be applied.

As defined by the selector, it is meant to override the system's default text selection colors. The browsers have apparently taken this literally. By specifying ::selection, those colors are immediately overwritten, even if you haven't specified them. The problem is the system's defaults are not part of CSS. The browser is seeing your declaration and thinking "ignore the system's default, use what's in this declaration instead." Since you don't have colors specified there, no colors are applied (background is none and color is inherit). Whoops, kind of hard to tell your text is selected, huh?

This is only a theory of what appears to be happening since, as I said, there really is no documentation on what actually happens, or what is supposed to happen.

Honestly, the only way you'd really know for sure is to look at the source code and see what it's doing when it sees that selector. Maybe asking someone on the development team for one of these browsers would be easier. Either way would still be difficult. Maybe you could submit a bug report and they can delve into the issue a little more...

How to set custom ::selection style but keep the browser-default text selection color?

This behavior has been codified in the spec, as follows:

The UA must use its own highlight colors for ::selection only when neither color nor background-color has been specified by the author.

(This used to say "should" until last year, when it was changed to "must". There aren't any browsers implementing some version of ::selection that don't already follow this rule anyway.)

System colors are only exposed to CSS as user-defined values (which may or may not be just the system default), and not the system-defined defaults, so can't be known in advance. Therefore, as CBroe implies, this rule is in place to ensure that changing just one doesn't cause it to clash with the user-defined value for the other, causing contrast issues. The actual codification of this rule in the spec is for legacy reasons, but this rationale for browsers behaving like this in the first place is cited in discussions such as this one.

There are a number of standardized as well as non-standard system colors that exist, but the behavior of these varies wildly from browser to browser, and from platform to platform. Attempting to use any of these may have unexpected results, ranging from unexpected colors used, to being ignored by the browser altogether. Plus, as I mentioned, system colors are only exposed as user-defined values anyway. The CSSWG has discussed potential ways to improve this before; here's a recent conversation.

You are encouraged to apply a custom selection background color that complements your custom selection foreground color.

How to reset background color of ::selection

The solution is to use the system color highlight for the background and highlighttext for the foreground.

Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!

The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.

/* colours from theme */::-webkit-selection {  background-color: brown; color: yellow;}::-moz-selection {  background-color: brown; color: yellow;}::selection {  background-color: brown; color: yellow;}
<div>This is a div in which you can make a selection</div>

How do I set colour to same as the selection colour so works on all browsers/operating systems

You can try using System Colors in CSS2, but its Deprecated already with CSS3 appearance.

System colors refer to Operating system colors and not User Agent colors.

.highlight {   color: HighlightText;   background-color: Highlight;   }
<div class="highlight">Highlight</div>

CSS selector ::selection is not using given background color

To escape the filter' a somewhat hacky way of doing it might be to have a second copy of the heading which is placed over the original and is actually the element for which selection takes place.

Its text and background are transparent until there is a selection at which point the selection (only) becomes white and red respectively.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
}

.rgb {
position: fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation: animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.shadow {
color: transparent;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
}

.shadow::selection {
background: red;
color: white;
}

@keyframes animate {
0%,
100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
<h1 class="rgb">Welcome to my webpage</h1>
<h1 class="shadow">Welcome to my webpage</h1>

Changing the background color of the selected options in a select box

It is not possible to do this with HTML/CSS. The colors of the select elements are Operating System specific and so cannot be changed with CSS or HTML. Javascript solutions have been developed and they're (so far) the only way to do it :)

Can you change the background color of highlighted words using CSS?

Use the ::selection selector to override the default text selection color:

::selection {
color: red;
background: black;
}

Why does the CSS3 pseudo ::selection not change the color for all parts?

The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:

https://bugs.webkit.org/show_bug.cgi?id=38943

The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.

Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/

And a post I wrote about it: https://stackoverflow.com/a/8529323/918414



Related Topics



Leave a reply



Submit