Join us and the lead editor of IRL, Mozilla's multi-award-winning podcast, for a behind-the-scenes look at the pod and to contribute your ideas for the next season, themed: "AI and ME." Mark your calendar and join our Community Call on Wednesday, Aug 7, 17:00–17:45 UTC. See you there!

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

URL bar background color Change CSS????

more options

I tried all these below and none work


  1. urlbar[breakout][breakout-extend] {background: black !important;}
  1. urlbar[breakout]{background: black !important;}
  1. urlbar{background: black !important;}

.urlbar{background: black !important;}

.urlbarview{background: black !important;}

root {--mbarstyler-match-background-color: black; /* [0.0,0.05,0.1] */ }
root {--mbarstyler-match-background: black; /* [0.0,0.05,0.1] */ }
  1. urlbar[breakout][breakout-extend] > #urlbar-background { color: black !important; }


/* Megabar background */

.urlbarView.megabar{

background-color: black !important;

}

I tried all these below and none work #urlbar[breakout][breakout-extend] {background: black !important;} #urlbar[breakout]{background: black !important;} #urlbar{background: black !important;} .urlbar{background: black !important;} .urlbarview{background: black !important;} :root {--mbarstyler-match-background-color: black; /* [0.0,0.05,0.1] */ } :root {--mbarstyler-match-background: black; /* [0.0,0.05,0.1] */ } #urlbar[breakout][breakout-extend] > #urlbar-background { color: black !important; } /* Megabar background */ .urlbarView.megabar{ background-color: black !important; }

선택된 해결법

Glad I could help :)

문맥에 따라 이 답변을 읽어주세요 👍 1

모든 댓글 (5)

more options

If you are looking to change the background of the entire address bar (the input area and the drop-down area), the following CSS code should achieve what you are looking for:

#urlbar-background {
    background: black !important;
}

If you are looking to change just the input part of the address bar, you need to change the CSS selector to #urlbar-input-container instead and that should work for you.

Hope this helps.

more options

HI Wesley,

I figured it out myself, at least this works but now need to figure out how to change the txt color. joy

For anyone interested this is what is needed:

  1. urlbar > #urlbar-background {background-color: black !important;}

I don't know if i can remove the #urlbar > your syntax is probably correct.

But now what is the code to change the text color when it is in static mode?

more options

you are right i just tested and it does not need the "urlbar >"

But now all the icons in the url bar are not visible. Why does mozilla have to change the UI and make this so difficult, this all worked fine prior to 77.0.1

What is the code to make the txt white and the icons like tracker/https/bookmarks be white??? you fix one thing and than everything else goes to hell.

more options

You are the man, the second part of what you had is what i needed.

This is for anyone looking for the older way it used to be.

  1. urlbar-background {background-color: black !important;}
  2. urlbar-input-container {color: white !important;}
more options

선택된 해결법

Glad I could help :)