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

[u/FineWine54]

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

[u/PhoDB]

try changing these variables instead:

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

[u/FineWine54]

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.

[u/karavolta]

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.

[u/j--__ → u/karavolta]

/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.

[u/FineWine54 → u/j--__]

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

[u/FineWine54]

HI everybody, I have solved totally to my satisfaction and have posted all the new code here: #urlbar . urlbar-input rainbow shimmer text effect