Change appearance of a checkbox

The following example does not have the slightest whiff of “Javascript”

[code]

untitled document #myform label { display:block; width:22px; height:22px; margin:5px 0; background-image:url(http://coothead.co.uk/images/blue.png); } #myform label:hover { background-position:-24px 0; } #myform input[type="checkbox"]:checked~label { background-position:-48px 0; } #myform input[type="checkbox"] { display:none; } #myform input[type="submit"] { display:block; margin-top:5px; }
classical
pop
rock
country
indie
easy listening
[/code]

coothead

4 Likes