Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reset background color of ::selection

/* Site */
::-webkit-selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}
::-moz-selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}
::selection {
  background-color: @highlightBackground;
  color: @highlightColor;
}

I am using semantic-ui as css framework, and I have been overriding its values today. I came across with selection option, which is overridden by default, and I would like to set it as computer default. As some of you know, you can change selection color in macbooks, so I would like my users to use computer's default selection color.

So, what should I do? I tried inherit and transparent but they don't work.

like image 913
cyonder Avatar asked Oct 31 '15 04:10

cyonder


People also ask

How do I reset my background color?

Select Start > Settings > Personalization > Colors, and then choose your own color, or let Windows pull an accent color from your background.

How do I change the color of a selection dropdown?

Change Select List Option background colour on hover. Changing <select> highlight color. Change color of selection.

How do I fix the background color in HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.


1 Answers

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>

Then we'll add the colors highlight and highlighttext to the end of the css (emulating our custom stylesheet) to show that the selection color is back to the default.

/* colours from theme */
::-webkit-selection {
  background-color: brown; color: yellow;
}
::-moz-selection {
  background-color: brown; color: yellow;
}
::selection {
  background-color: brown; color: yellow;
}


/* overriding colors */
::-webkit-selection {
  background-color: highlight; color: highlighttext;
}
::-moz-selection {
  background-color: highlight; color: highlighttext;
}
::selection {
  background-color: highlight; color: highlighttext;
}
<div>This is a div in which you can make a selection</div>

Disclaimer: these system colors are officially deprecated; there is no proper replacement yet though. Also, in Chrome it seems to reset the colors to slightly different ones than they have in the absence of any styles; I seem to have to do some more research.

like image 96
Mr Lister Avatar answered Sep 18 '22 01:09

Mr Lister