Changing the URL highlighted/selected text background colour

[ch3f]

How do I change the background colour of the highlighted/selected text background color? The grey part show in here:

When you click on the text in the URL bar the current url displayed is highlighted/selected, this is what I want change.

I have searched this forum and the only code I found from a post back in 2018. this code.

.addressfield form input.url::selection {
  background-color: #F00;
}

currently I can only change the font size, family, style etc. but that's it. this where I put it under.

.UrlBar-UrlField:focus{}

also, should note that Im MacOS Catalina, if that makes any difference
Thankyou for any/all assistance

[A Former User]

The selector is just a little outdated, that’s all. Now it should be .UrlBar-UrlField::selection

[ch3f]

Brilliant! Thank You! ..

One more thing. This is what its supposed to look like :

but when clicking it changes to this:

the font slightly changes (I haven't changed any fonts anywhere), seems its a little, stretched? blurred perhaps or?
Also there's a "border-left" and a "border-right" both are set to none, I have tried everything I can think of.

Thanks Again

[BoneTone]

@ch3f I don't see any font change there beyond the full URL being in white instead of some of it in grey.

[ch3f]

@BoneTone there IS a slight change when you click back and forward from url bar to page and back, it IS very slight but nonetheless annoying.

[BoneTone]

@ch3f Well, in the screenshots you provided there is no change in the font all, except for the color as I noted before. They are almost pixel for pixel exact matches, nothing has been stretched out or whatever. The only slight difference is in the alignment of the entire address, which does not occur in my address field, so there might be something in your css causing this.

[ch3f]

@BoneTone yup, that part is ok but how do I remove the border from

	div.UrlBar-AddressField{}

the only thing i can do to it, is hide it.

It has a 1px top and left border I cant remove.

[BoneTone]

https://duckduckgo.com/?q=css+properties+border

[ch3f]

@BoneTone yup very familiar with those.

the problem is when I click on the url bar ie.selected. that the border shows

[BoneTone]

Then you've got the wrong selector: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools

[ch3f]

@BoneTone that's how I found it.

I add

display: none !important;

and the whole url bar is gone, so yeah the right one.

just have to find a way to hide the border.

[BoneTone]

@ch3f I point you again to the duckduckgo link

[nomadic]

@ch3f Sounds like the default styling is overriding your more general CSS because the default CSS is more specific.

Like @BoneTone was saying, inspecting the UI is the best way to see what is causing this.

Since you can't really be looking at the dev tools and selecting the address bar at the same time, you should simulate the address bar being selected by changing the state.

:focus-within should get you the offending CSS.

[ch3f]

@nomadic Thankyou,

tried everything..literally..but only one has an effect

div.UrlBar-AddressField{}

unfortunately the only thing that solve is hiding it lol

[A Former User]

@ch3f When I set border & box-shadow both to none (just in case, with an !important) for it, there’s no border at all—no matter whether it is focused.

[BoneTone]

@ch3f said in Changing the URL highlighted/selected text background colour:

@BoneTone yup very familiar with those.

I'm not sure that's correct. It sounds like you're still using display set to none. That's not how you modify the border, there are several border properties, including border.

[Pathduck]

@ch3f If you had used the UI Inspector you would've been able to figure it out yourself:

[ch3f]

@Pathduck I have and do use UI Inspector, if only a few times, so not fully competent.

the code in common.css is

.SearchField,
.UrlBar-AddressField {
  border-radius: var(--radius);
  border: 1px solid var(--colorBgIntenser);
  color: var(--colorFg);
  background-color: var(--colorBgIntenser);
  align-items: center;
  display: flex;
}

it has zero effect in my custom css but works perfectly if the value is changed in the common.css, any
way to force to use my variable?

[BoneTone]

@ch3f said in Changing the URL highlighted/selected text background colour:

any
way to force to use my variable?

!important

Edit: BTW, those aren't the only styles applying to that selector, as evidenced by the inspector. Cascading style sheets, well, cascade... styles get inherited. So you're better off using the inspector, as has we have noted, rather than digging into common.css.

[ch3f]

@BoneTone

this code and the !important; did the trick.

.SearchField:focus-within,
.UrlBar-AddressField:focus-within {
  border-color: var(--colorAccentBgFadedMost);
  box-shadow: 0 0 0 0px var(--colorAccentBgDark), 0 0 0 0px var(--colorAccentBgFadedMost) inset;
}