Checkboxes in web pages – how to make them bigger?

html css checkbox
Tony the Pony picture Tony the Pony · Nov 9, 2010 · Viewed 131.5k times · Source

The standard checkboxes rendered in most browsers are quite small and don’t increase in size even when a larger font is used. What is the best, browser-independent way to display larger checkboxes?

Answer

Paul picture Paul · May 1, 2013

In case this can help anyone, here's simple CSS as a jumping off point. Turns it into a basic rounded square big enough for thumbs with a toggled background color.

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}
<input type="checkbox" />

Related questions

How to style a checkbox using CSS

I am trying to style a checkbox using the following: But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Read More
Radio/checkbox alignment in HTML/CSS

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based: <table> <tr> <td><input type="radio" …

Read More
How to change the background color on a input checkbox with css?

Hello Friends all I'm trying to do is change the background color of a checkbox. I tired many things but nothing works. Can some one help? input[type="checkbox"] { background: #3d404e; border: #7f83a2 1px solid; }

Read More