본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Avatar for Username

Mozilla 도움말 검색

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

자세히 살펴보기

이 쓰레드는 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

CSS to change background color of Find bar

  • 2 답장
  • 1 이 문제를 만남
  • 1 보기
  • 최종 답변자: Quisquose

Quisquose
Quisquose
more options

1. What CSS code do I need in order to change the background color of Firefox's "Find" bar?

2. Will changing the background color of the Find bar also affect the Quick Find (i.e. FAYT) bar, or does that require separate code?

I use the Status-4-Evar extension, and the following code changes its color:

  1. status4evar-status-bar {

-moz-appearance: none !important; background-color: #C8D7F1 !important; }

It works great, and so I wanted to also be able to do the same for the Find bar.

I've tried to find the ID of the Findbar so that I could insert the ID into the above CSS example, but I have been unable to locate the correct ID that I should use. 

(Firefox v29)
1. What CSS code do I need in order to change the background color of Firefox's "Find" bar? 2. Will changing the background color of the Find bar also affect the Quick Find (i.e. FAYT) bar, or does that require separate code? I use the Status-4-Evar extension, and the following code changes its color: #status4evar-status-bar { -moz-appearance: none !important; background-color: #C8D7F1 !important; } It works great, and so I wanted to also be able to do the same for the Find bar. I've tried to find the ID of the Findbar so that I could insert the ID into the above CSS example, but I have been unable to locate the correct ID that I should use. (Firefox v29)

선택된 해결법

Use the following in either Stylish or userChrome.css. In the latter, the first line should appear only once in the file. It affects both the Find Bar and the Quick Find Bar. 

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

findbar {-moz-appearance: none !important; background-color: #C8D7F1 !important; }

If you need to examine elements of the user interface, install DOM Inspector and Element Inspector. You can then simply hold down Shift and right-click an UI element. N.B.: this shortcut is used to bring up the default context menu on sites that replace it or prevent it from showing; best to keep Element Inspector disabled when you're not using it.

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

모든 댓글 (2)

Gingerbread Man
Gingerbread Man
more options

선택된 해결법

Use the following in either Stylish or userChrome.css. In the latter, the first line should appear only once in the file. It affects both the Find Bar and the Quick Find Bar. 

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

findbar {-moz-appearance: none !important; background-color: #C8D7F1 !important; }

If you need to examine elements of the user interface, install DOM Inspector and Element Inspector. You can then simply hold down Shift and right-click an UI element. N.B.: this shortcut is used to bring up the default context menu on sites that replace it or prevent it from showing; best to keep Element Inspector disabled when you're not using it.

Quisquose
Quisquose 질문자
more options

Thanks. That works great.

I had tried to use DOM Inspector but I found it really confusing and unintuitive. However, your suggestion of using Element Inspector makes it a whole lot easier.