How can I make a checkbox bigger?

Question

My web page uses checkboxes. They appear very small. I tried to make them bigger by using "font-size: 1.5em". This didn't seem to change them at all.

Is there a simple way that I can make a checkbox bigger?

Thanks,

Answer 1

You can do this using images.

CSS

#mycheckbox
{ 
    display: none; 
}

#mycheckbox + label
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/photo_of_big_unchecked_box.png'); 
}

#mycheckbox:checked + label
{ 
    background: url('/path/to/photo_of_big_checked_box.png'); 
}

HTML

<input type="checkbox" name="mycheckbox" id="mycheckbox"><label for="mycheckbox"></label>

That's one way you might accomplish the goal.

EDIT

Here is the working link for IE