Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Constant URL bar border with color of my own choosing?

  • 3 replies
  • 1 has this problem
  • 9 views
  • Last reply by cor-el

more options

For quite some time I've been using a userChrome.css code to remove the border from the URL bar when focused. However, I made a new theme of my own and now I need the border back BUT!!! I need it to be visible all the time - whether the URL bar is on focus or not, and also I want it to have a color of my own choosing. I already know the code for the color (#E2B582), but I have no idea what to type in the CSS file in order to have the border appear the way I want it.

For quite some time I've been using a userChrome.css code to remove the border from the URL bar when focused. However, I made a new theme of my own and now I need the border back BUT!!! I need it to be visible all the time - whether the URL bar is on focus or not, and also I want it to have a color of my own choosing. I already know the code for the color (#E2B582), but I have no idea what to type in the CSS file in order to have the border appear the way I want it.

All Replies (3)

more options

Try this code:

#urlbar > #urlbar-background {--toolbar-field-focus-border-color:#E2B582 !important;}

Modified by cor-el

more options

This works only partially. When I click somewhere else the focus is removed and so is the border. I need the border to be visible even when the url bar was not clicked on. Also, I tried making the border 1 pixel thick by adding to the code you gave me but it didn't work:

  1. urlbar > #urlbar-background {

--toolbar-field-focus-border-color:#E2B582 !important; border:1px !important;}

more options

This looks like the relevant code that adds the outline when the urlbar is focused.

I'm not sure if you can add the outline when the drop-down list is open and if other 'brwakout' code is interfering.

  1. urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
  2. searchbar:focus-within {
 outline: var(--focus-outline);
 outline-offset: calc(var(--focus-outline-width) * -1);
 /* We used --focus-outline above to inherit its width and style properties,
    but we still want to use the theme's border-color.
    --toolbar-field-focus-border-color is set equal to --focus-outline-color
    on :root, but LWT themes can override this value. */
 outline-color: var(--toolbar-field-focus-border-color);
 border-color: transparent;

}