Use CSS to make big checkboxes, radio buttons

May 6th, 2005 | by dan |

I’m working on a fairly boxy design for a website, and have a page with not much on it except 3 checkboxes, descriptions of the options and a submit button. Everything looked great except the 3 checkboxes – they were far too small and did not match the rest of the page design. I tried adding a style=”width: 20px; height: 20px;” to the input decleration and ho-boy, I’ve got big checkboxes! The height of the checkboxes now matches the height of the description container. I had never thought that you could change the size of those things at all, but you can with CSS. Works for radio buttons too. Read on for examples…


Regular Method:


By Adding style=”width: 15px; height: 15px” to the definition



Also works for radio buttons:

It would take some more styling to make the text center against the checkbox, but that shouldn’t be too hard. I’ve not yet tried using a percentage value for the width/height – someone let me know if that works too.

  1. 6 Responses to “Use CSS to make big checkboxes, radio buttons”

  2. By danielcole on May 6, 2005 | Reply

    It seems that Firefox is not the same across all platforms. In windows the black dot in the radio button scales along with the button, but in linux the black dots stays the same size as a normal button.

  3. By danielcole on May 6, 2005 | Reply

    It seems that Firefox is not the same across all platforms. In windows the black dot in the radio button scales along with the button, but in linux the black dots stays the same size as a normal button.

  4. By Mike on May 6, 2005 | Reply

    On my iBook, firefox, the black dot on the radio buttons stays small, just like on your linux box. However, with Safari (2.0 on Tiger), the dot is small as well, but that probably because none of the checkboxes or radio buttons are sized differently. Looks like those that view the web via Safari only, will never get the joy of a huge ass radio button or checkbox.

  5. By Mike on May 6, 2005 | Reply

    On my iBook, firefox, the black dot on the radio buttons stays small, just like on your linux box. However, with Safari (2.0 on Tiger), the dot is small as well, but that probably because none of the checkboxes or radio buttons are sized differently. Looks like those that view the web via Safari only, will never get the joy of a huge ass radio button or checkbox.

  6. By TTT on May 17, 2012 | Reply

    What is explained here does not work for me, but there is always a way.
    And this is the best example I have found:
    http://www.thecssninja.com/css/custom-inputs-using-css

  7. By Anonymous on Jun 25, 2012 | Reply

    Doesn’t work with google chrome 🙁

Sorry, comments for this entry are closed at this time.