Until Firefox gets native form widgets on OS X, here are some CSS rules to put in userChrome.css (for Firefox 1.1) to make them look a lot better:
html|textarea,
html|input:not([type]),
html|input[type="text"],
html|input[type="password"] {
border-top: 1px solid #7c7c7c !important;
border-right: 1px solid #abb0b5 !important;
border-bottom: 1px solid #cacdd1 !important;
border-left: 1px solid #abb0b5 !important;
padding-left: 3px !important;
padding-right: 3px !important;
margin-right: 3px !important;
}
html|button,
html|input[type="reset"],
html|input[type="button"],
html|input[type="submit"] {
border: 2px solid !important;
-moz-border-radius: 1px !important;
-moz-border-bottom-colors: #919498 #cecece;
-moz-border-left-colors: #6d6f72 #fff;
-moz-border-right-colors: #919498 #cecece;
-moz-border-top-colors: #6d6f72 #fff;
background: #ddd !important;
color:#262626 !important;
font-size: 90%;
}
html|input[type="checkbox"],
html|select {
border: 2px solid !important;
-moz-border-radius: 1px !important;
-moz-border-bottom-colors: #919498 #cecece;
-moz-border-left-colors: #6d6f72 #fff;
-moz-border-right-colors: #919498 #cecece;
-moz-border-top-colors: #6d6f72 #fff;
}
html|button:focus,
html|button:focus:active,
html|input[type="reset"]:focus,
html|input[type="button"]:focus,
html|input[type="submit"]:focus,
html|input[type="checkbox"]:focus,
html|input[type="radio"]:focus,
html|input[type="image"]:focus,
html|input:not([type]):focus,
html|input[type="text"]:focus,
html|input[type="password"]:focus,
html|textarea:focus {
-moz-outline-style: solid !important;
-moz-outline-width: 2px !important;
-moz-outline-color: -moz-mac-focusring !important;
-moz-outline-radius: 2px !important;
-moz-outline: invert;
}
input[type="radio"] {
background-color: transparent !important;
border: 0 none !important;
}
input[type="radio"]:focus {
border-style: none !important;
}
input[type="radio"]:hover:active {
background-color: transparent ! important;
border-style: none !important;
}
*|*::-moz-radio {
background-color: transparent !important;
}
html input[type="radio"] {
background: transparent url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0D%00%00%00%0D%08%06%00%00%00r%EB%E4%7C%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%01%BDIDAT(%CF%7D%92%CBj%22A%14%86%2B%04%7C%8A%ECf%19%1C%F2%00Y%CE3%88%22%18D%5C%B8p%A3%A0%60%23%B8%E8%85.%144x%19D%D3%9B%C6%85%E2F%A2kAE%C1%8DB%22%5Eh%14%5B%DA%D1%8C%06i0%F6%25gN%09%01I%E2%14%7C%14U%A7%FES%A7%CE_%04%00%C8%07%26%93%C9h6%9B%8BV%ABU%B4%D9l%60%B7%DBE%A7%D3Yt%B9%5C%C6%D3s%1F%87%0D%08c%B1X%94p8%3Co%B5Z%F2p8%84v%BB-'%12%09%D1%EDv%2B%1E%8F%87%F1%F9%7C%97%A7%A2%7B%CC%BC%E9%F5z%AA%A6i%F0%99%C1%60%A0%06%02%81%BF%0C%C3%DC%1FE(%B8%C5%92%B4F%A3%F1%86%03%CE%D1%EDv%DFB%A1%90%C6%B2%EC-A%01%EF%F7%FB%9F1%1B%C8%B2%7C%16%1AO%A5RO%91H%84'%F4%D1%3C%CF%BF%60%FD%D0%EF%F7A%14EX%AF%D7%B0%D9l%8E3%5D%D3%7D%1A%AFT*%2F%D1hT%24%F8%96C%BD%5EWi%26%CAd2%F9%96%F1x%0C%9DNG%8D%C7%E3%07%E2p8%A4j%B5%BA%9DN%A70%9B%CD%40%92%A4%2F%D0%7D%1Ao6%9B%DBt%3A%FD%87x%BD%DE%C7X%2C%26%ACV%2B%D8%EDvg%A1%F1r%B9%2Cp%1C%F7H%1E8%EE%8E%FA0%1A%8D%FE%DB%BD%C5b%A1e2%19%A5P(%FC%22%7BE%FF%19%0C%06%0B%C8%16k%D7q%C0g%E6%F3%B9%9E%CB%E5%B6%D9l%F6%F7%D1%A7%BD%F2n%C4%2C%3F%D08%16%7D%D0K%A5%D2%2B%15%2F%97K%10%04A%AF%D5j%AFx%83%8E%026%9F%CF%1B%8E%A2%C3%5E%BDF%D7%AFpq%81%C6%DD%A0%0FEl%AB%84%5D%82d2)%A1%A0%88%82%9B%D3%BF%F7%0F%17%A1%07%3Bd%AE%22%FF%00%00%00%00IEND%AEB%60%82") no-repeat center center !important;
}
html input[type="radio"]:checked {
background: transparent url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0D%00%00%00%0D%08%06%00%00%00r%EB%E4%7C%00%00%00%04gAMA%00%00%D9d%91%00%BBZ%00%00%00%20cHRM%00%00y%17%00%00%80%E8%00%00%EB%E5%00%00%86e%00%00%80.%00%00%DD%E0%00%009%13%00%00-%F1C9'%3A%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%01%C7IDAT(%CF%7DR9k%02Q%10~%04%D6%C2%DF%11R%A7%D4F%1B%3B%EB%88%20%08%0A%82%26%9D%E0%16j%A5%0B%B2%10%0B%0B%C1%C4%03%04%23%24Z%2B%B10%85%08%1BY%CC%22%E2z%E1%81%16%1E%98%C2X%08*%93yK%124%90%3C%F8x%FBf%E6%9B%E3%9B%25%00%40%BEa2%99%CE%CDf3o%B1X%0AV%ABU%B4%D9l%05%87%C3%C1%BB%5C%AE%F3%E3%B8%EF%60%06a%C7%40)%16%8B%F5%EA%F5%FA%C7p8%04I%92%3E%D2%E9t%DF%EDvK%08%3B%CB%B2g%C7%24%16%B3I%9DNg%B7%DF%EF%E17%06%83%C1.%10%08%BC%F9%7C%3EV!!%E1%12%DB%91DQ%DC%E2%81%BF%D0h4%B6H%948%8E%BB%248%03%17%0C%06_eY%86%CDf%03%DDn%17%8CF%23%A8T*%E5%A6oj%A7%FET*%25%F0%3C%CF%11%3At%3E%9F_%0A%82%40%B3%81N%A7%C3%FA%E4%07%1A%8DF%B1S%7F%B1X%5C%86%C3%E1%02A%85j%D5juG3Q%A8%D5%EA%13%12%C30%D0%EF%F7%A1%D7%EB%01%8E%B0%8BD%22%02q%3A%9D%2F%E5r%F9%7D4%1A%C1x%3C%06%BD%5E%7FB%D2j%B5%8A%9D%FAk%B5%DA%7B%22%91%A8%10%AF%D7%7B%8F%1F%CD%C5b%01%EB%F5%1AZ%AD%16%18%0C%06%85%40o%FA%A6v%EA%C7%F6%9A%99%87%CC%1Dy%7Cz%BA%F2x%3CM%DC%CB%BF%EA%CD%E7%F3%7D2%99l%E6r9%AD%B2'%94%F1%16U%91'%93%C9%01%0F%FC%C6l6%3Bd%B3Y%19%3B%F2%FD%2C%97%C2%EF%F7%DF%84B%A1v%A9TZR%F2j%B5%82%E9tz%A8T*K%AC%D0%8E%C7%E3%D7(9sB%FA%AAx%81%15y%94%F5%19U%12%A3%D1%E83%FEV%3C%12.%8E%E3%3E%01%9D%DF%D0%A6%F7%A0%3D%0A%00%00%00%00IEND%AEB%60%82") no-repeat center center !important;
}
You also need to comment out a few '! important' bits in Firefox's /res/forms.css file, so they can be overridden. The radio buttons and check boxes section should look like this:
/* common features of radio buttons and check boxes */
input[type="radio"],
input[type="checkbox"] {
/* same colors as |input| rule, but |!important| this time. */
-moz-box-sizing: border-box;
background-color: -moz-Field /* ! important */ ;
color: -moz-FieldText ! important;
border: 2px inset ThreeDFace /* ! important */;
}
input[type="radio"][disabled],
input[type="radio"][disabled]:active,
input[type="radio"][disabled]:hover,
input[type="radio"][disabled]:hover:active,
input[type="checkbox"][disabled],
input[type="checkbox"][disabled]:active,
input[type="checkbox"][disabled]:hover,
input[type="checkbox"][disabled]:hover:active {
padding: 1px;
border: 1px inset ThreeDShadow ! important;
/* same as above, but !important */
color: GrayText ! important;
background-color: ThreeDFace ! important;
cursor: inherit;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
border-style: groove /* ! important */;
}
input[type="checkbox"]:hover:active,
input[type="radio"]:hover:active {
background-color: ThreeDFace /* ! important */;
border-style: inset /* ! important */;
}
*|*::-moz-radio {
width: 4px;
height: 4px;
background-color: -moz-FieldText /* ! important */;
-moz-border-radius: 3px;
}