[SOLVED] How to set highlighted text color in CSS?

[ineuw]

I am getting some very weird combination of foreground and background colors for selected text. Is it possible to set my preferences in the userChrome.css? If so, what would be the code?

[MarkRH]

I was able to do it with this in Stylus (or Stylish), change colors to what you want:

Code: Select all

::selection {
  background: #ffb7b7 !important; /* WebKit/Blink Browsers */
    color: yellow !important;
}
::-moz-selection {
  background: #ffb7b7 !important; /* Gecko Browsers */
    color: yellow !important;
}

Putting it into userChrome.css changed nothing. I don't think userChrome.css can affect an actual web page's appearance, just the browser itself.

[ineuw]

MarkRH, Thank you x 3. Excellent even your color settings are great.

[MarkRH]

MarkRH, Thank you x 3. Excellent even your color settings are great.

Really? LOL.. I just tested some wacky colors so I knew it worked. I can't even read the text with those colors. Whatever works though.

[Frank Lion]

Putting it into userChrome.css changed nothing.

It does, if you put it above the namespace line and is useful in hitting the input boxes (addressbar, searchbar, etc) that userContent.css cannot touch.

Because those boxes are more heavily OS affected than webpages would be, you need to use something like this -

Code: Select all

/*Franks Urlbar Selected Text Fix...*/
::-moz-selection {
-moz-appearance:none !important;
	background:#6B7E8F; 
	color: white;}

Btw even for a test, those are some seriously bad colours you picked there.

[MarkRH]

I don't have a namespace line. My userChrome.css contents are here: http://www.markheadrick.com/firefox/fir ... appearance

[Frank Lion]

I don't have a namespace line. My userChrome.css contents are here: http://www.markheadrick.com/firefox/fir ... appearance

Put it back, it's useful -

Here's my current userChrome.css file:

Note: I am only including my top userChrome.css as I am using parts of Aris-t2/CustomCSSforFx and there is a lot there.

Also, I did find out that I had to comment out:

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");

In order for the following to work:

@import url("userChrome-aris.css");

@import urls are also placed above the namespace line.

[CaJazzman]

when you say foreground and background colors, can you specify in detail, by what you mean. I'm some what familar with editing the userChrome.css file contents, but, after reading your, ( MarkRH ) file, it threw me for a loop.
This is how my userChrome.css file contents look like:

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* FILL BOOKMARK FOLDERS WITH GIVEN COLOUR */
/* THIS ALSO WORKS WHEN USING "Show All Bookmarks" */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  fill: orange !important;
}

/* tabs on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#toolbar-menubar .toolbarbutton-text { display: block !important; }
#nav-bar .toolbarbutton-text { display: block !important; }
/* Search Bar width */
.searchbar-textbox {
max-width: 500px !important;
min-width: 300px !important; }
 .tab-background {
border-radius: 16px 16px 0px 0px !important;
border-image: none !important; }

.tab-line {
display: none; }
#TabsToolbar {-moz-box-ordinal-group:1000!important}?

What can I do to change colors like you are talking about?

[MarkRH]

I don't have a namespace line. My userChrome.css contents are here: http://www.markheadrick.com/firefox/fir ... appearance

Put it back, it's useful -

@import urls are also placed above the namespace line.

I guess they do still work if you do that. I noticed that I had to move your URL CSS snippet above the namespace line in order for it to work, like you mention. Still, need to use the Sylish/Stylus CSS to modify the highlight colors of the webpage content itself.

[Frank Lion]

Still, need to use the Sylish/Stylus CSS to modify the highlight colors of the webpage content itself.

...or put the code in userContent.css.

[MarkRH]

Still, need to use the Sylish/Stylus CSS to modify the highlight colors of the webpage content itself.

...or put the code in userContent.css.

Yep, that does work in userContent.css. Keeping it in Stylish/Stylus does make it a bit easier to toggle the effect on and off though. Whatever works though. Thanks.

[Frank Lion]

Whatever works though. Thanks.

No problem.

I suppose my point was that there is no need to give an OP a new learning curve with a new extension unless it is really necessary. Here, we knew the OP was already using userChrome.css, so the leap to userContent.css is a very small one.

No big deal, but I thought I'd mention it.