setting checkbox size

[geoapa]

Does anyone know how to set the size of a checkbox?

[Birdman]

I don't think you can do it. Sorry :(

[grahamstewart]

If you want to make it easier to click on a checkbox then the label tag can help.

<label><input type="checkbox" name="agree">
I agree to the terms and conditions.
</label>

Doing this means that users can also just click on the label text to check/uncheck the box.

Its also a good practise in terms of accessibility (as is defining an accesskey which I haven't done here).

Note: just tried this and IE doesn't allow you to click on the text.. Grrr.. Opera and Netscape behave correctly. Oh well, its still good practise. :)

[Birdman]

Nice Graham! I like it when I can click the text.

[grahamstewart]

More experimenting shows that you can actually do this...

HTML:

<input class="bigcheck" type="checkbox" name="agree">

CSS:

input.bigcheck {
height: 50px;
width: 50px;
}

..and it will draw a nice big checkbox on IE 6 and Netscape 7, but this time its Opera 7 that lets us down and draws a normal size box with a lot of space around it.

[raymurphy]

Thanks for pointing out a CSS approach for resizing the checkbox - works exactly as expected in IE6.

If you want to make it easier to click on a checkbox then the label tag can help .... Note: just tried this and IE doesn't allow you to click on the text..

I'm sure I've done this before, when experimenting with the FIELDSET and LEGEND tags - haven't the code to hand, but trying something like this should work in IE6 :

<FIELDSET NAME="yourfieldset">
<LEGEND>Optional Legend Text</LEGEND>
<INPUT TYPE="checkbox" NAME="checkme" ID="checkme">
<LABEL FOR="checkme" ACCESSKEY="C"><U>C</U>heck This Text</LABEL>

</FIELDSET>

[grahamstewart]

Another quick experiment and it turns out that IE does let you click on the <label> text but only if use the explicit form of label..

e.g. Rays version with the explicit 'for' attribute works..

<input type="checkbox" name="checkme" id="checkme">
<label for="checkme" accesskey="C">Check this text</label>

..but the less verbose implicit label doesn't...

<label accesskey="C">
<input type="checkbox" name="checkme">
Check this text</label>

The W3C says:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element....
.....When a LABEL element receives focus, it passes the focus on to its associated control.

- [w3.org...]

What was it I was saying in another thread [webmasterworld.com] about Microsoft not even being able to follow the HTML standard and making life difficult for us coders?

The HTML4.01 standard is over five years old and they still haven't got it right.

Grrr..

[raymurphy]

I forgot to mention that I've got the luxury/pleasure(?) of only having to contend with IE as the installed browser, and so my code may have been IE-specific.

Interesting comment from Graham about the difference between what W3C state, and what Microsoft end up implementing, and the link to [w3.org ] looks quite interesting - thanks for that!

[waldemar]

Seeing raymurphys code...

<LABEL FOR="checkme" ACCESSKEY="C"><U>C</U>heck This Text</LABEL>

...I wonder why...

label:first-letter { text-decoration: underline; }

...doesn't work (neither IE nor Mozilla)...?!?!?!?

[DrDoc]

:first-letter can only be applied to block level elements.

Thus,

#myid:first-letter {
text-decoration: underline;
}
<div id="myid">text</div>

...works, but

#myid:first-letter {
text-decoration: underline;
}
<span id="myid">text</span>

...doesn't.