How can I make a checkbox with a Width & Height of 16px? [duplicate]

Question

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?

Answer 1

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);

Answer 2

Yup.

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

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