View Comments

Use CSS to make big checkboxes, radio buttons

Posted on May 6, 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.

  • danielcole

    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.

  • danielcole

    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.

  • http://hellyeahbitch.com Mike

    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.

  • http://hellyeahbitch.com Mike

    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.

  • TTT

    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

blog comments powered by Disqus