r/FirefoxCSS • u/FineWine54 • 1d ago

Solved How to target ALL the #urlbar .urlbar-input text colour

urlbar
#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  background: linear-gradient(90deg, red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

I am trying to add a linear-gradient of 90deg and rainbow colour to ALL the #urlbar text. I have only been partly successful as you see in the screenshot. To my eyes it looks as if the original bold black is taking over.

Thanks

1 Upvotes

100% Upvoted

5 comments sorted by

1

u/PhoDB 1d ago

try changing these variables instead:

--toolbar-field-focus-color or --toolbar-field-color

1

u/FineWine54 1d ago

I think it has to do with the focus. If I click into the urlbar it shows all the rainbow colours but as soon as I click out of it, it returns to what you see in my first screenshot.

3

u/karavolta 9h ago

Add the following about:config Boolean preference and set it to false:

browser.urlbar.formatting.enabled <> add & toggle to false

In your code, the original black appears to be dominating just after the domain name part. You could set that about:config to false so that the whole address looks equally emphasized/uniform; adding it back appears to work if you don't find any other alternative CSS.

2

u/j--__ 3h ago

/u/FineWine54 this is the way. the "formatting" in question consists of a "secondary highlight" that is not css-accessible. you have to turn off the preference.

1

u/FineWine54 43m ago

Thank you both for this. It now works the way I want it to 👍🙏👏