PrefBar Howto "Highlight checkbox"

Some people have asked me in the past, if it's possible to display a checkbox on PrefBar in red, if it's checked. For example, some people like to have Javascript disabled at all, by default and only enable it from time to time by checking the checkbox. Now they want to see easily, that something "possibly dangerous" is enabled.

You may get this if you follow the following steps

At first, you have to find out the ID of the button, you want to have coloured in one if its switch states. The easiest way to do this is to right-click on the checkbox, you want to color, and choose "Edit button ..." in the context menu. The ID is the first entry in the "PrefBar button editor" window. For the JavaScript checkbox, it would be just
javascript
At next we need the location where we may store a "userChrome.css" file. We'll need it for the CSS hack, we need to colorize checkboxes. The file has to be placed into the subdirectory "chrome" of your profile directory. Mozillazine has instructions on how to find your profile:

http://kb.mozillazine.org/Profile_folder

In the right directory, you may already find a "userChrome-example.css". If you have it, then it's the right directory to create a new file, named "userChrome.css" and open it in the editor of your choice.
Now, as we have the ID and an open editor with our "userChrome.css" file, we can go on with adding the CSS, we need:
#prefbar-buttons checkbox[id$="javascript"][checked="true"] { -moz-appearance: none !important; background-color: red !important; }
The values in red letters are those, where you may edit for your needs. The first value is the ID, you found out in the first step of this Howto. The second value is the state of the checkbox, where it gets red. If you replace "true" with "false", there, then your checkbox will be red when disabled.

If you want to have more than this one checkbox colored, then you may add more items in the following way:
#prefbar-buttons checkbox[id$="javascript"][checked="true"], #prefbar-buttons checkbox[id$="cookies"][checked="true"] { -moz-appearance: none !important; background-color: red !important; }
Be sure, you add the comma between the lines!
If you've added the CSS information to userChrome.css, then save the file and restart SeaMonkey/Firefox for the changes to take affect.

How to Highlight a checkbox in red, if it's checked?