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 neithercolor
norbackground-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
Em Vs Px and Cross Browser Compatibility
Overriding CSS Properties That Don't Have Default Values
How to Edit Auto-Formatting Rules for CSS/Scss/Less Using Prettier in Vscode
Angular2 Module Level Stylesheets
Angular 8: Change Height in Mat-Form-Field to Specific Pixel Number
Correct Font-Display Value for Icon Fonts
Change The Title Header Color Permanently in Shiny Dashboard
Margin Does Not Push Down Another Margin
Putting an Image as a Frame Around an Iframe
Ruby on Rails Dropdown <Select> Menu - How to Style or Apply Class to The Options
How to Make Bootstrap 4 Carousel Images Responsive
How to Audit Multiple Pages with Chrome Developer Tools
How to Get Bootstrap Tour to Work with a Jquery Dialog
How to Change CSS When It's Ng-Disabled
Interruption of a CSS Transition Does Not Work for Same Attribute Value