Powered by Twitter.com. See the tips archive here.
Powered by www.flickr.com. See the photo archive here.
Riverfront Times: STLog Pam Beesley
The Files Files St. Louis Beacon
Viva El Birdos St. Louis Daily Photo Blog
Urban Review STL STL Bloggers
Girl's Guide to the Galaxy.com Patrick Says
Super Fun Patrol The Vital Voice

Blog Roll: Check out our friends above.

Notice: This website, specifically this post, and the views contained may not necessarily be the views of the author's employers, friends or family.

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.

This entry was posted on Friday, May 6th, 2005 at 1:41 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
«
»
  • 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.
  • 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.
blog comments powered by Disqus