Protip: if you want to style checkboxes, radio buttons, or select menus in Firefox, don't bother

This isn't a very good protip, but it might save you a ton of time.

In Safari and Chrome (and, to the best of my memory, recent versions of IE), one can style radio buttons, checkboxes, and select menus via their usual selectors. It's a really simple, elegant way to customize form controls.

However, it is impossible to completely style any of the above form controls in Firefox, even if you include -moz-appearance: none;, which should neutralize any of the default styles. This is due to two bugs:

• 649849 is one year old, and has nobody working on it.
  
• 418833 is over four years old, and has nobody working on it.

Radio buttons and checkboxes can mostly be styled, except when they are in the checked state — they will adopt the default black dot or checkmark.

Select menus are even worse. Firefox draws a fakey Aqua background on the Mac (and presumably, an equally fakey Aero one on Windows), so that background will remain if you don't include -moz-appearance: none;. If you do include that in your CSS, your styles will apply everywhere except the drop arrow button, which gets a Windows 95-esque grey bevelled button. It's pretty bad.

There are three possible "solutions" to this:

1. Style the form controls, and let Firefox draw them the best it can.
   
2. Implement some custom javascript wizardry to replace the controls with divs and spans that look and behave like form controls, but pass their instructions to the actual checkboxes, radio buttons, and select menus.
   
3. Give up on custom controls.

Bootstrap chooses option #2. Most developers I know choose option #3. If you have a cutting-edge audience, you're probably safe with #1.

Edit: Poetically, in an entry regarding styling bugs, CoderWall has issues with inline code in lists.