Australis customizing urlbar highlight (OS X)

[onto3423]

How can I customize the highlight in the urlbar in the Australis nightly builds? Selected text is unreadable when the urlbar has a dark barkground. I'm on OS X 10.8.5

See screenshot.


I tried something like

Code: Select all

#urlbar[focused="true"],
.searchbar-textbox[focused="true"] {
  background: rgb(10,10,10) !important;
  color:#000 !important;
}

but it's not changing.

I'm using this style to change the urlbar to a dark background: Darker urlbar + searchbar textbox for FT DeepDark

[onto3423]

I just found out that the highlight and highlight text color is due to the system preferences. Choosing another color (e.g. #333) for selections and highlights in the OS X system preferences makes the text readable. Topic can be closed.

[smsmith]

There should be a CSS hack to do it as well. I didn't have any luck poking around at the URL/address bar in the DOM Inspector, but I do know that your sample code above will just change the background of the address bar and the color of the text in the address bar when you put the cursor in it, but not the highlight color. But, if you are satisfied with your global change...

[patrickjdempsey]

::-moz-selection pseudo selector:
https://developer.mozilla.org/en-US/doc ... :selection

[onto3423]

::-moz-selection pseudo selector:
https://developer.mozilla.org/en-US/doc ... :selection

Thanks to both of you! I just tried

Code: Select all

#urlbar::-moz-selection,
.searchbar-textbox::-moz-selection {
  background: #333;
  color: #fff;
}

but it doesn't work. I get "Unknown pseudo-class or pseudo-element 'selection'. Ruleset ignored due to bad selector" in the Stylish Editor. (Same for ::moz-selection.)

And applying the selector globally doesn't throw an error, but doesn't seem to work either

Code: Select all

::-moz-selection { color: #fff;  background: #333; }

Any ideas?

[patrickjdempsey]

Two things:

1. You need !important tags.

2. The pseudo selector stands by itself as a child of the target, so you need a space between them:

Code: Select all

#searchbar ::-moz-selection,
#urlbar ::-moz-selection { 
color: #fff!important;  background: #333!important; 
}

[onto3423]

Two things:

1. You need !important tags.

2. The pseudo selector stands by itself as a child of the target, so you need a space between them:

Code: Select all

#searchbar ::-moz-selection,
#urlbar ::-moz-selection { 
color: #fff!important;  background: #333!important; 
}

Thanks! Unfortunately it still doesn't work on my side. It seems the OS X system settings are overriding the styles. Which is weird, because ::-moz-selection and and ::selection are working fine when applied to websites.

Scratch that, sorry. Now it's working! I had to create a new stylish snippet instead of adding the code to the one that makes the urlbar darker. Thank you so much for your help!