Check box size change with CSS

Question

How can I change check box sizes (globaly) without class and id? Is it possible to do this in a way different from:

input[type=checkbox] {
    zoom: 1.5;
}

And why does this approach not work for you? – David Thomas Aug 28 '14 at 13:15 — David Thomas, Aug 28 '14 at 13:15

Charleshaa · Accepted Answer · 2014-08-28T13:28:53.660

98

input fields can be styled as you wish. So instead of zoom, you could have

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}

EDIT:

You would have to add extra rules like this:

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

Check this fiddle http://jsfiddle.net/p36tqqyq/1/

edited Aug 28 '14 at 13:28

answered Aug 28 '14 at 13:13

Charleshaa

2,218
2
21
25

I think I use this on my Website... might be wrong gonna check – Charleshaa Aug 28 '14 at 13:15
This work i just check – Klapsius Aug 28 '14 at 13:16
I stand corrected; I tested using `150%` in my own tests which moved the checkbox into a larger area but remaining the same size. Using `px` does indeed change the size of the checkbox itself. Earlier comment retracted. – David Thomas Aug 28 '14 at 13:18
It does work if you override other browser styles as well (like background). You might have issues with just the size being stated in some browsers. – Charleshaa Aug 28 '14 at 13:18
1

This is true. You should reset the value first in your css before applying it, else other browsers will override this. I can confirm this works, however I prefer using scale values, because it scales with browser size. On mobile devices, 30px looks different than scale sizes. Next to that, the density per screen varies, making 30px on a low rez much bigger than scale sizes. So it depends on what you try to accomplish :) – Dorvalla Aug 28 '14 at 13:20
@Charleshaa can you show working fiddle? – Bhojendra Rauniyar Aug 28 '14 at 13:21
@C-linkNepal http://jsfiddle.net/p36tqqyq/ – Charleshaa Aug 28 '14 at 13:25
I cannot see increased size of checkbox – Bhojendra Rauniyar Aug 28 '14 at 13:26
1

yes same , checkbox still appear same size. – Kheema Pandey Aug 28 '14 at 13:30
Well you should just change the values in the CSS, and see it working... What browser are you on ? – Charleshaa Aug 28 '14 at 13:30
3

I've checked in `FireFox` v.31 and change the `width` and `height value`, still same – Kheema Pandey Aug 28 '14 at 13:30
I have Firefox 29.0.1 and it works... I'm on a mac BTW – Charleshaa Aug 28 '14 at 13:33
Just tried on v31.0, works also for me, although the other styles like colors are ignored. – Charleshaa Aug 28 '14 at 13:34
I duplicated the size rules in the first fiddle, maybe that's it, this is the one working for me : http://jsfiddle.net/p36tqqyq/1/ – Charleshaa Aug 28 '14 at 13:35
2

This is interesting but without the check how does a user know if the checkbox has been checked? Becomes a mystery meat form element without check. – b_dubb Sep 12 '14 at 17:03
1

@b_dubb you can use the pseudo-class `input[type="checkbox"]:checked` to style it as you wish. – Charleshaa Sep 15 '16 at 11:49
just a note, that `outline: 0 none;` is evil – ViliusL Sep 28 '18 at 13:11

score 27 · Answer 2 · answered Aug 28 '14 at 13:13

27

You might want to do this.

input[type=checkbox] {

 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
  padding: 10px;
}

answered Aug 28 '14 at 13:13

Shreejibawa

1,860
1
25
35

1

How is this not the accepted answer? – Rap Feb 16 '15 at 22:36
12

The solution has problem on chrome from mac. The checkbox is blury – Misha Akopov Sep 04 '15 at 12:25
4

You might want to do this, but you probably don't. It's super pixelated and not acceptable for most applications. – losmescaleros Aug 03 '16 at 17:16
thanks. works fine – Arun Prasad E S Aug 12 '16 at 11:28
Now there is no need to use the browser specific options. – Yetti99 Jun 23 '17 at 16:11
This makes it really pixelated though – David Ball Apr 23 '19 at 09:49
The scale approach makes the checkbox icon blurry. – Drew Feb 20 '23 at 03:11

score 22 · Answer 3 · edited Mar 01 '18 at 19:10

22

Try this

<input type="checkbox" style="zoom:1.5;" />
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */

edited Mar 01 '18 at 19:10

Linith

1
2

answered Aug 28 '14 at 13:24

Genish Parvadia

1,437
3
17
30

4

doesn't work for firefox – Arun Prasad E S Aug 12 '16 at 11:26

Check box size change with CSS

3 Answers3