Checkbox size

Question

Is it possible to set the size of a checkbox using css or html ? "width" and "size" work under IE6+ but not with firefox, where the checkbox stays 16x16 even if I set a smaller size

Answer 1

You can't. But you can use niceforms. Last version was launched few days ago and looks pretty cool. A PSD for easy customisation is included ;)

Answer 2

This is hard to do cross-browser. Roger Johansson has investigated this rather extensively.

Answer 3

My understanding is that this isn't easy at all to do cross-browser. Instead of trying to manipulate the checkbox control, you could always build your own implementation using images, javascript, and hidden input fields. I'm assuming this is similar to what niceforms is (from Staicu lonut's answer above), but wouldn't be particularly difficult to implement. I believe jQuery has a plugin to allow for this custom behavior as well (will look for the link and post here if I can find it).

Answer 4

Another approach similar to niceforms but much simpler and concerned only with checkboxes can be found at brainerror.net. The script was written in 2004 but I used it for a project in September 2008 and it held up surprisingly well. It may be a much quicker and simpler solution to implement than niceforms.

Answer 5

Found this useful hint today: you can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: -webkit-transform: scale(1.3, 1.3);