5

I want to have a large checkbox with a width of 16px and a height of 16px. I don't want to have to use a JavaScript plugin. Can this be done with modern CSS?

Sparky
  • 98,165
  • 25
  • 199
  • 285
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012

2 Answers2

17

You can disable default checkbox appearance with appearance property in css and after that style it any way you like with borders, background-images and etc:

-webkit-appearance: none; 
-moz-appearance: none; 
-o-appearance: none;

To style hover and checked statuses use: :hover, :checked and :hover:checked pseudoclasses.

Another way is to use transform property to enlarge it:

-webkit-transform: scale(1.6,1.6);
-moz-transform: scale(1.6,1.6);
-o-transform: scale(1.6,1.6);
Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27
3

Yup.

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

http://www.thecssninja.com/css/custom-inputs-using-css

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • 1
    The first link is specifically for Wufoo forms. And it should be noted that some browsers (Explorer less than 9) will not be able to utilize the techniques in your second link. – Sparky Oct 22 '11 at 01:30
  • I assumed we can't use the words modern CSS and IE together :) and wufoo still produces HTML including checkbox elements so the technique applies regardless. – Moin Zaman Oct 22 '11 at 03:22
  • Just thought I'd point it out if it wasn't obvious to anyone. – Sparky Oct 22 '11 at 03:37