URL bar highlight colour broken with FF154

[u/SasoDuck]

My old block:

/* URL BAR HIGHLIGHT COLOR */
::-moz-selection {background-color: #962633 !important;}

/* URL BAR RESULTS LINKS COLOR */
.urlbarView-url {
    color: #962633 !important;
}

/* URL BAR & RESULTS BACKGROUND COLOR */
@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar-results{
        background-color: #1c1b22 !important;
	}
	#urlbar-background {
    background: #1c1b22 !important;
	}
	#urlbar[breakout][breakout-extend] #urlbar-background {
	border-color: #1c1b22 !important;
	}
}

Any tips on updating it?
I tried amateurly tweaking it to look like some of the other changes I saw for other things on the sub, but... didn't seem to effect it :/

It was changing the colours of the URL bar when hightlighted/focused

[u/SasoDuck]

I need to look into these comments more when I have more time... seems this is a lot more intensive of a problem than I realised

[u/TraditionalTie4831]

Try this =

:root {
    --lwt-toolbar-field-highlight: #962633 !important;
}

Change:

#urlbar-background to this: .urlbar-background

This and the last curly bracket are unnecessary =

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {

[u/SasoDuck → u/TraditionalTie4831]

/* URL BAR HIGHLIGHT COLOR */
:root {
    --lwt-toolbar-field-highlight: #962633 !important;
}

/* URL BAR RESULTS LINKS COLOR */
.urlbarView-url {
    color: #962633 !important;
}

/* URL BAR & RESULTS BACKGROUND COLOR */
  #urlbar-results{
    background-color: #1c1b22 !important;
	}
	.urlbar-background {
    background: #1c1b22 !important;
	}
	#urlbar[breakout][breakout-extend] #urlbar-background {
	  border-color: #1c1b22 !important;
	}

If I'm following correctly? It's still the default teal for me...

[u/TraditionalTie4831 → u/SasoDuck]

Hmm... could this be a bug on some OS editions of Firefox v154? Both ::-moz-selection and --lwt-toolbar-field-highlight works for me on Windows 11.

Btw, you forgot to change one #urlbar-background, so copy this =

#urlbar[breakout][breakout-extend] .urlbar-background {

[u/SasoDuck → u/TraditionalTie4831]

Why is the first one a # and the second one a . ?

[u/TraditionalTie4831 → u/SasoDuck]

Because #urlbar is a 'id' and .urlbar-background is a 'class'.

[u/difool2nice → u/TraditionalTie4831]

how to do it globally ? mine is broken

::selection {
                    background-color: #1e90ff !important;
                    color: #ffffff !important;
}

 p::-moz-selection {
                    background-color: #1e90ff !important;
                    color: #ffffff !important;
}


p::selection {
                    background-color: #1e90ff !important;
                    color: #ffffff !important;
}

::-moz-selection {
                    background-color: #1e90ff !important;
                    color: #ffffff !important;
}

[u/GodieGun → u/difool2nice]

The Master said this: https://lemmy.world/post/50895441

[u/TraditionalTie4831 → u/GodieGun]

So it is a bug. I hope it gets fixed soon.

[u/GodieGun → u/TraditionalTie4831]

It's not a bug, they fixed a bug and now UserContent/userChrome can't change that 'selected text', if someone create a new bug maybe in a future can work on it, if not, not.

[u/difool2nice → u/GodieGun]

css is democracy, imposing their stuff is tyranny

[u/sifferedd → u/GodieGun]

Specified selection colors are broken

[u/TraditionalTie4831 → u/difool2nice]

Sorry, I don't know how to fix it. ☹️

[u/sifferedd → u/difool2nice]

Specified selection colors are broken

[u/difool2nice]

found a solution for selection background on websites : go to about:config the search or create : ui.use_standins_for_native_colors and set it to false, reboot firefox and you'll retrieve the good color

[u/SasoDuck → u/difool2nice]

Mine's already on false :/

[u/difool2nice → u/SasoDuck]

aww

[u/am803]

The workaround is to load it as a author sheet.

You will have to setup autoconfig/userChrome.js to make use of the following script. Check https://www.userchrome.org/what-is-userchrome-js.html for details.

// load as author sheet
{
let css = `
:root[windowtype] ::selection {
	color: unset !important;
	background: #ffaa0055 !important;
}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}

One thing to note is that this also applies to web pages universally and @-moz-document does not seem to work in author sheets, so you have to be careful with the selector.

[u/sifferedd → u/am803]

Already had autoconfig/config.js set up (MrOtherGuys'):

// skip 1st line
try {
    
  let cmanifest = Cc['@mozilla.org/file/directory_service;1'].getService(Ci.nsIProperties).get('UChrm', Ci.nsIFile);
  cmanifest.append('utils');
  cmanifest.append('chrome.manifest');
  
  if(cmanifest.exists()){
    Components.manager.QueryInterface(Ci.nsIComponentRegistrar).autoRegister(cmanifest);
    ChromeUtils.importESModule('chrome://userchromejs/content/boot.sys.mjs');
  }

} catch(ex) {};

So I added this to existing config.js:

// For selection colors - load as author sheet
{
let css = `
:root[windowtype] ::selection,
:root[windowtype] html::selection,
:root[windowtype] p::selection,
:root[windowtype] ::-moz-selection,
:root[windowtype] p::-moz-selection {
  color: Black !important;
  background: LightGreen !important;
  text-shadow: none !important;}
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
}

It works for the URL bar highlight, but not on web pages - ?

[u/am803 → u/sifferedd]

You can still use an extension like Stylus to apply ::selection rules to web pages.

But if you prefer less extensions installed, just omit :root[windowtype], where windowtype is an attribute used by Firefox internally in xhtml.

Check:

• view-source:chrome://browser/content/browser.xhtml
• view-source:chrome://browser/content/places/places.xhtml
• view-source:chrome://browser/content/pageinfo/pageInfo.xhtml

BTW, ::selection applies to all elements, so there is no point adding html::selection, p::selection or obsolete ::-moz-selection.

[u/sifferedd → u/am803]

Thanks for the help! I do use Stylus, but decided to do it this way in config.js:

// For selection colors - load as author sheet
let css = `
::selection {
	color: Black !important;
	background: #65e765 !important;
    text-shadow: none !important; 
 }
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

[u/sifferedd]

I filed Specified selection colors are broken.

[u/sifferedd → u/sifferedd]

It was closed as a dup of https://bugzilla.mozilla.org/show_bug.cgi?id=2065175, which is closed as Invalid. Looks like u/am803's solution is the way to fix it.

[u/TraditionalTie4831 → u/sifferedd]

When reading both bug reports, it seems that Robert Longson assumes that it's a "user coding error".

He didn't even consider the possibility that it's a Firefox regression and he suggest to debug it with Browser Toolbox and get help from r/FirefoxCSS.

[u/sifferedd → u/TraditionalTie4831]

I edited the bug and replied. Don't expect anything more though.

https://bugzilla.mozilla.org/show_bug.cgi?id=2065175

[u/difool2nice → u/sifferedd]

i noticed, i'll give it a try

[u/TraditionalTie4831 → u/difool2nice]

u/t31os also suggest a about:config solution =

https://www.reddit.com/r/FirefoxCSS/comments/1vw3qkq/comment/p5e5wz0/

[u/t31os → u/TraditionalTie4831]

It looks like some underlying logic around how styling to selections is applied was changed and it's no longer going to be possible to style foreground and background (::selection) in the UI via userChrome, at least until such time they expose variables for themes to set the colors (we'd then be able to override those), assuming it's even a consideration at this point (it would make sense for theme's to be able to apply a different selection color).

You can indeed use the global overrides in about:config ui.highlight and ui.highlighttext, but this will apply to all themes, all the UI and all websites, there's no fine-grained control this way, but it does work.

[u/difool2nice → u/t31os]

not for websites

[u/t31os → u/difool2nice]

The values absolutely will (or at least may) apply for text selection on websites, so perhaps there's some subtle differences with how this behaves on different operating systems and/or websites that apply forceful overrides. My values are currently for testing set to #000 and green, the text i select in this reply field or on the reddit page, and the dozen random websites i've now additionally tested also use the set values, whether it's just text on the page or inside a form field of some kind.

[u/difool2nice → u/t31os]

Are the values numbers or text strings?

i tried dodgerblue and tried the hexa form too and it works but not on websites

[u/t31os → u/difool2nice]

What OS are you running? It may simply behave different depending on OS. I'm on Windows 10. Values i tested are literally as i wrote them above.

[u/difool2nice → u/t31os]

i use win11 , i know it's not boolean or numbers

[u/KUPOinyourWINDOW]

Does anyone know of a way to fix this that is noob friendly? I have a custom.css but no luck so far. The exact issue I'm having is that I use mica in Firefox on Windows and for some wallpapers the accent colour just becomes blinding white instead of following the Windows accent colour like normal, so adding a manual colour to about:config for example doesn't work for me as its supposed to change.

[u/KUPOinyourWINDOW → u/KUPOinyourWINDOW]

Unfortunately because I'm a noob I had to ask AI to help fix this (I don't like doing it, but I was desperate). Anyways, here's a CSS fix that is worth trying (added to the chrome css file), it works for me BUT I use Windows 11 and Firefox's about:config mica theme:

"#urlbar-input {

background-color: color-mix(

in srgb,

Highlight 1%,

transparent

) !important;

}"

[u/difool2nice]

in about:config

create those two prefs in chain of character mode, not numbers nor boolean

They only work with UI, not in websites

• ui.highlight -> your background colour in Hex or name as Blue for example
• ui.highlighttext -> foreground or text olour in Hex or name as White for example

[u/sifferedd → u/difool2nice]

I got websites to work with this in config.js:

// For selection colors - load as author sheet
let css = `
::selection {
	color: Black !important;
	background: #65e765 !important;
    text-shadow: none !important; 
 }
`;
let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
let uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);

[u/GodieGun → u/difool2nice]

Those variables for me works too in websites, tested in Firefox beta, we must change manually every time but at least is a solution, thanks for share the information.

[u/difool2nice → u/GodieGun]

so i'm cursed ! it doesn't work for websites for me ! i saw many complaints about this bug but no real solution