We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Ce site disposera de fonctionnalités limitées pendant que nous effectuons des opérations de maintenance en vue de vous proposer un meilleur service. Si un article ne règle pas votre problème et que vous souhaitez poser une question, notre communauté d’assistance est prête à vous répondre via @FirefoxSupport sur Twitter, et /r/firefox sur Reddit.

Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

CSS to change background color of Find bar

  • 2 réponses
  • 1 a ce problème
  • 1 vue
  • Dernière réponse par 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)

Solution choisie

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.

Lire cette réponse dans son contexte 👍 1

Toutes les réponses (2)

Gingerbread Man
Gingerbread Man
more options

Solution choisie

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 Auteur de la question
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.