checkboxes/radios help

edited July 2008 in Style Development
how do you change
border width
background color
and the check element (or dot in case of radio buttons)
for checkboxes/radio elements ?

I could only figure out how border coloring works


  • input{-moz-appearance:none!important}
  • Cho, do you really think i had any chances of changing border color without knowing about -moz-appearance:none!important ? :d

    and of course standarized css has little effect on these elements.

    eg, color:red!important won't work..
  • could be :)
    are you asking about websites or firefox?
  • I'm using firefox and standarized css has no effect on the checkboxes and radios, so I gues i have to use some -moz quirks i don't know well.
    While I know in Opera there is no such a problem, I'm looking how to do it under FF.
  • this changes it for me (a solid border doesnt seem to work)
    radio>.radio-check-box1{display:none!important} .checkbox-check{background:transparent!important;border:1pt dotted red!important;-moz-appearance:none!important}
  • no, it doesn't work. Not even the border, dotted or not, it remains unchanged.

    the only -moz quirk i found working are for border color:
    -moz-border-bottom-colors: blue cyan !important;
    maybe good to say i still use FF2 coz it works better with some crucial add-ons.
  • this do anything?
    radio>.radio-check-box1{display:none!important} .checkbox-check{background-color:red!important;border-width:0!important;-moz-appearance:none!important}
  • no ;)
  • edited July 2008
    The last !important in every line is missing semicolon. Could this be the reason?
  • no xD
    but thanx for interest.
  • @Yog im not sure why it isnt working. i tried it on ff2 (.14 i think) with no other styles (it should make any checkboxes red).

    @makondo you dont need to add the last ; that just for adding more then more declaration
  • The only thing you can do to radio buttons and checkboxes is -moz-border-bottom-colors, etc...
  • @Yog apply this then goto your options and see if theres any difference
    @namespace url(; radio>.radio-check-box1{display:none!important} .checkbox-check{background-color:red!important;border-width:0!important;-moz-appearance:none!important} .checkbox-check[checked="true"], radiogroup:not(.chromeclass-toolbar) radio[selected="true"]{list-style-image:url(chrome://browser/skin/safebrowsing/close16x16.png)!important} .checkbox-check:not([checked="true"]), radiogroup:not(.chromeclass-toolbar) radio:not([selected="true"]){list-style-image:url(chrome://browser/skin/feeds/feedIcon16.png)!important}
  • YogYog
    edited July 2008
    This also has no effect on websites

    although, you remember this checkbox in userstyle edit window? ;P It became all red and appearently all what wont work for website, works there, heh.

    This is possible stylish bug. There is that arrow for opening list of options from select element and on a forum i was wondering why it was brown for a while. I removed color:brown important: from a rule for checkboxes and it became black again. I reaplied it and it remained black. weirdo.
  • yea thats the one i thought you meant (you did say firefox when i asked above)

    you can edit forms.css in program files>mozilla firefox>res if you want to change the radios/checkboxes
    look for
    input[type="radio"], input[type="checkbox"] {then change the stuff below it, you may have to remove the -moz-appearance: checkbox; and -moz-appearance: radio; from the two rules above it
  • Maybe you can try -moz-outline rather than border, I don't know if this can work or not...
Sign In or Register to comment.