CSS: adjusting checkbox size

Question

Hi,

Is there a way to adjust the dimension of an <input type="checkbox" />

I already tried it using style="width:30px; height:50" approach, but it didn't work Any idea? Is this even possible?

Thanks.

Regards, Erwin

Answer 1

No, i don't think there's a way of doing it by only using html / css.

You could just make an overlay (div) which is positioned right over the checkbox and makes it visible. Using this overlay you could add an own checkbox graphic and change it's image (=it's visible value) whenever the user clicks on the image. Furhtermore you'll then have to update the real checkbox's value manually to assure that the form can be send containing the checkbox's form value.

This technique is often used by RIA frameworks like QooxDoo, ExtJS, etc.

here you'll find a really nice example of how to use the described technique.