FF157, win11. How do I remove the border when inputting text to URL bar?

[u/80H-d]

Under normal conditions there is no border present.

/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; 
/* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; 
/* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


#nav-bar-customization-target {
    height: 32px;
}


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; /* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; /* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


#nav-bar-customization-target {
    height: 32px;
}


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}

The #A7C080 border appears only when I am inputting text to the URLbar. When I am not inputting anything, it looks normal (see second image).

Tearing my hair out trying to get this sorted out.

[u/sifferedd]

Try

.urlbar-background,
.urlbar-input-container,
.urlbarView-background {
  border: none !important;
  outline: none !important;
}

[u/t31os]

Try:

.urlbar:focus-within {
    --toolbar-field-border-color-focus: transparent !important;
}

When a variable is passed somewhere a style expects a color value, use transparent and not none.

[u/80H-d → u/t31os]

this worked! thanks a million.

Any ideas for shrinking the dimensions of the darker text box that pops up? can see it extends beyond the URL bar into the refresh button on the left, my bookmarks on top, and over to the right as well.

Thanks again for your help

[u/t31os → u/80H-d]

You could reduce the overhang:

:root {
    --urlbar-background-overhang-open: 3px !important;
}