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?

possible duplicate of Checkbox size

Andy
– Andy

2012-11-29 17:42:44 +00:00
Commented Nov 29, 2012 at 17:42 — Andy
– Andy, Commented Nov 29, 2012 at 17:42

stwp · Accepted Answer · 2015-03-31 02:07:02Z

51

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);
    }

answered Mar 31, 2015 at 2:07

stwp

5271 gold badge4 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sfelber Over a year ago

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

sfelber Over a year ago

Be careful with using scale. To support all browsers you should do much more: see stackoverflow.com/questions/306924/checkbox-size-in-html-css

ejntaylor Over a year ago

Really pixilated. Not ideal solution imho.

Chloe · Accepted Answer · 2017-09-20 20:28:38Z

13

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.

answered Sep 20, 2017 at 20:28

Chloe

26.5k45 gold badges211 silver badges380 bronze badges

Comments

Rahul Tripathi · Accepted Answer · 2012-11-29 17:42:41Z

11

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

answered Nov 29, 2012 at 17:42

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

2 Comments

codeChris Over a year ago

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

Rahul Tripathi Over a year ago

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

Kijewski · Accepted Answer · 2016-05-02 15:51:16Z

10

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>

edited May 2, 2016 at 15:51

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

answered Nov 29, 2012 at 17:57

Andy

14.6k3 gold badges55 silver badges76 bronze badges

5 Comments

codeChris Over a year ago

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...

Andy Over a year ago

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

Oiva Eskola Over a year ago

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

andreszs Over a year ago

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

Chloe Over a year ago

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

Kurt Emch · Accepted Answer · 2012-11-29 17:52:17Z

3

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;
}

answered Nov 29, 2012 at 17:52

Kurt Emch

5294 silver badges18 bronze badges

1 Comment

Asle G Over a year ago

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

DropHit · Accepted Answer · 2017-03-08 04:11:22Z

1

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.

edited Mar 8, 2017 at 4:11

answered Apr 22, 2016 at 18:03

DropHit

1,72416 silver badges29 bronze badges

1 Comment

sekrett Over a year ago

Great, but something without Bootstrap would be better.

Dominic Green · Accepted Answer · 2012-11-29 17:44:44Z

0

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.

answered Nov 29, 2012 at 17:44

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

aldrien.h · Accepted Answer · 2016-07-27 05:20:45Z

0

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.

answered Jul 27, 2016 at 5:20

aldrien.h

3,7233 gold badges36 silver badges59 bronze badges

Comments

Asle G · Accepted Answer · 2016-05-22 08:34:26Z

-1

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

edited May 22, 2016 at 8:34

answered May 18, 2016 at 19:55

Asle G

5887 silver badges27 bronze badges

1 Comment

Asle G Over a year ago

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

Collectives™ on Stack Overflow

Create CSS to enlarge checkboxes

9 Answers 9

3 Comments

Comments

2 Comments

5 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

2 Comments

5 Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related