How to get rid of the border around urlbar upon clicking (lemmy.world)

submitted 2 weeks ago by [email protected] to c/[email protected]

5 comments fedilink hide all child comments

I tried to set the background colour for my urlbar with #urlbar-input-container { border: none !important; border-radius: 5px !important; background: light-dark(#ffffffff, #1b1e20ff) !important; } this works fine for the most part, except on focus it creates some corner effects, which I think might be from the border that gets overlapped somehow.

And this is how it looks on focus without my code

top 5 comments

sorted by: hot top controversial new old

[-] [email protected] 2 points 2 weeks ago

If you aren't doing anything else to urlbar then I'd recommend styling #urlbar-background instead of #urlbar-input-container - like this:

#urlbar-background {
  border: none !important;
  border-radius: 5px !important;
  background: light-dark(#ffffffff, #1b1e20ff) !important;
  outline: none !important;
}

[-] [email protected] 1 points 2 weeks ago

This worked, thank you. Would you mind telling what difference between using urlbar-background over the other one?

[-] [email protected] 1 points 2 weeks ago

You'll be styling another element, that's really all it is.

Normally Firefox applies various styling rules to the element with id urlbar-background - so it makes sense to also apply your custom style rules and overrides to it. If you apply your background-color or border or other rules to some other element such as #urlbar-input-container then the original styling of #urlbar-background still applies as well.

This would then cause issue like you would see in your first image, exactly like you guessed; the outline of #urlbar-background is seen behind the background-color of #urlbar-input-container because the two boxes don't have exactly the same shape and thus you are not fully covering the urlbar-background.

[-] [email protected] 1 points 2 weeks ago

I see. Thank you for the explanation as well!

[-] [email protected] 1 points 2 weeks ago

May be a ::before or ::after or some selector (:focus) or some accessibility feature that highlights the selected item

this post was submitted on 28 Jun 2024

4 points (100.0% liked)

Firefox Customs

4 readers

2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago