Create CSS to enlarge checkboxes

Question

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.

Ideas?

Luminosity

possible duplicate of Checkbox size – Reseta

Answer 1

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

input[type=checkbox]:checked ~ div label{
    background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    background-size: 100%;
}

---

input {
  display: none;
}

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;
}

label input[type=checkbox]:checked ~ span {
  /* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
}

<label>
  Click me:
  <input type="checkbox" />
  <span></span>
</label>

Reseta

I love it!! It actually works quite well in a lot of browsers. Question for you though: How do I get it check? It isn't working with the code you gave me... – Luminosity

How is it not checking? What browser? It should do, the label gets :checked when the checkbox does, and vice versa. – Reseta

Please, don't override checkboxes if you want to keep your sanity. – Ruthieruthless

As "cross browser" as does not work on Opera Mini. -1 – Mythos

Using images is rather a heavyweight solution for this simple problem. – Friction

Answer 2

To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large.

input[type="checkbox"] {
  transform:scale(2, 2);
}

You can also use decimal values, for just slightly bigger checkboxes.

input[type="checkbox"] {
      transform:scale(1.3, 1.3);
    }

Ralfston

Please correct me if I am wrong, but scale will not work on all browsers: w3schools.com/css/css3_2dtransforms.asp – Pyralid

Be careful with using scale. To support all browsers you should do much more: see https://mcmap.net/q/45840/-can-i-change-the-checkbox-size-using-css – Pyralid

Really pixilated. Not ideal solution imho. – Sideways

Answer 3

This works. It uses relative sizes so it scales with your current font size.

input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
}

You may need to adjust your margins though.

Friction

Answer 4

Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.

or you can try with

 style="zoom:1.2"

jQuery offers a plugin to do a replacement on checkboxes

Corking

This one didn't work for me. Am I supposed to style the input element? – Luminosity

Yes you can give it a try but I would not recommend that as it will be inconsistent in different browsers. – Corking

Answer 5

I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.

input[type="checkbox"] {
  font-size: 50px;
}

Apologist

Seems to be a cross-browser issue with this as well (as my suggestion below). – Vera

Answer 6

I have used this library with sucess

http://plugins.krajee.com/checkbox-x

It requires jQuery and bootstrap 3.x

Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master

Put the contents of the zip in a folder within your project

Pop the needed libs in your header

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>

Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo

<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>

There are numerous other features as well if you browse the plugin site.

Rrhagia

Great, but something without Bootstrap would be better. – Municipality

Answer 7

Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here http://www.456bereastreet.com/lab/form_controls/checkboxes/ You can also create your own with javascript but this is not great for user accessibility.

So I would tray an avoid changing if possible.

Kite

Answer 8

Simply add background image to checkbox. And adjust the sizes as you prefer.

The code below automatically adds background when it's checked, and the size remains the same with unchecked status.

No need to specify like:

input[type=checkbox]:checked

or

input[type=checkbox]:checked ~ div label

For ex, all checkboxes:

input[type="checkbox"]{
  background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin: 0;
}

See fiddle here.

Richers

Answer 9

Or simply style it with height and width like this:

<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">

PS. I have used this with bootstrap and the "checkbox-inline" class

Vera

Works fine with Crome and IE. Seems to be an issue with Firefox and Safari, so I guess you´re right. – Vera