Take the 2-minute tour ×

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?

share|improve this question
add comment

8 Answers

up vote 8 down vote accepted

Image replacement techniques

Archive.org mirror

share|improve this answer
... but I still want the browser to treat the checkbox as a control, so the user can navigate it as usual –  Tony the Pony Nov 9 '10 at 18:49
@Jen: The tab key works on the page Harmen linked. –  Robert Harvey Nov 9 '10 at 18:50
Checkboxes, like <select> elements, behave like OS-level controls, not browser-level controls. As the appearance of these elements vary from OS to OS, they also do in browsers. This makes "styling" them very unlikely since they were not designed to be styled in the first place. –  Diodeus Nov 9 '10 at 18:51
Oh, yes! Brilliant, thanks! –  Tony the Pony Nov 9 '10 at 18:52
Link is broken, but this thread is similar:stackoverflow.com/questions/10843687/… and links to this:ryanfait.com/resources/custom-checkboxes-and-radio-buttons –  RJ Owen Sep 29 '12 at 5:11
show 2 more comments

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'] {
    border:2px solid #555;
input[type='checkbox']:checked {
    background: #abd;
share|improve this answer
add comment

Try this CSS

input[type=checkbox] {width:100px; height:100px;}
share|improve this answer
Not totally cross-browser (it's better to set a class in HTML and use the class selector in CSS), but this might be a better solution than mine. +1 –  Harmen Nov 9 '10 at 18:49
Note that this makes fuzzy looking controls in some browsers as the native control that is scaled up is a fixed sized image. –  jball Nov 9 '10 at 18:54
I was using width and height for example purposes. Probably a combination of Harmen and my solution is the way to go as you may need more styling than CSS can reasonably provide. –  Collin White Nov 9 '10 at 18:56
Awesome this works! –  DJTripleThreat Nov 18 '11 at 23:25
This will only work in some browsers, and not in many modern ones. –  RJ Owen Sep 29 '12 at 5:09
add comment

Changing the size of the checkbox using CSS produces inconsistent results across browsers and operating systems. You cannot truly make it larger.

You can restyle them, however: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

share|improve this answer
add comment

Here's a trick that works in most recent browsers (IE9+) as a CSS only solution that can be improved with javascript to support IE8 and below.

  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>

Style the label with what you want the checkbox to look like

  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
#checkboxID + label
  /* unchecked state */
#checkboxID:checked + label
  /* checked state */

For javascript, you'll be able to add classes to the label to show the state. Also, it would be wise to use the following function:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;

EDIT to modify #checkboxID styles

share|improve this answer
see stackoverflow.com/a/3772914/190135 for a link to full source code for this technique –  AlexChaffee Mar 30 '12 at 21:33
add comment

I'm writtinga phonegap app, and checkboxes vary in size, look, etc. So I made my own simple checkbox:

First the HTML code:

<span role="checkbox"/>

Then the CSS:

    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;

    background-image: url(../img/checkbox_c.png);

To toggle checkbox state, I used JQuery:

function createCheckboxes()

But It can easily be done without it...

Hope it can help!

share|improve this answer
add comment

Actually there is a way to make them bigger, checkboxes just like anything else (even an iframe like a facebook button).

Wrap them in a "zoomed" element:

.double {
  transform-origin:0 0;
  -ms-transform-origin:0 0;
  -webkit-transform-origin:0 0;
  -o-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -webkit-transform-origin:0 0;

<div class=double>
  <input type=checkbox name=hello value=1>

It might look a little bit "rescaled" but it works.

Of course you can make that div float:left and put your label besides it, float:left too.

share|improve this answer
add comment

Your Answer


