How Can I Make A Checkbox Bigger?

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

Solution 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

Solution 2:

Perhaps it seems a little too obvious, but it works:

input[type='checkbox'] {
    width: 30px;
    height: 30px;        
}

It works as you might expect on IE and Chrome, and even though it doesn't look like it's bigger on Firefox you still get a larger hit box:

Solution 3:

You can not change the appearance of check boxes in most browsers. Check this: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

Try to add an element and make it change the status of the checkbox. Check this for an example: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Solution 4:

Sadly, CSS is kinda undefined with <input> making possibilities of modifying them limited. Various browsers do things differently. width and height practically work on checkboxes only in Internet Explorer.

Various solutions appeared, for example emulating checkboxes using JS, so those can be styled.

Solution 5:

AS you cant change the appearance of checkboxes cross browser compatible, I suggest, to use something like Ryan Fait describes in his blog. This technique allows you to use custom graphics for your checkboxes.

---