Constant URL bar border with color of my own choosing?
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)
Try this code:
#urlbar > #urlbar-background {--toolbar-field-focus-border-color:#E2B582 !important;}cor-el trɔe
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:
- urlbar > #urlbar-background {
--toolbar-field-focus-border-color:#E2B582 !important; border:1px !important;}
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.
- urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
- 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;
}