Checkbox size in HTML/CSS

Question

Is it possible to set the size of a checkbox using CSS or HTML?

width and size work under IE6+ but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.

This is hard to do cross-browser. Roger Johansson has investigated this rather extensively. — Cristian Libardo, Nov 20 '08 at 21:45
With a little work and a bit of ingenuity, this can easily be achieved using a couple of images and some jquery: jsfiddle.net/4kdn8 — MacroMan, Aug 7 '12 at 15:09

Matt Baker · Answer 1 · 2016-11-22 11:00:35Z

up vote 255 down vote

It's a little ugly (due to the scaling up), but it works on most newer browsers:

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

edited Nov 22 at 11:00

Matt Baker

1,58911029

answered May 2 '12 at 13:58

jdw

2,867187

3

this seems to be the correct answer as the one marked as answer offers no solutions in many cases (no solution to firefox on xp? no chrome at all?), is outdated and only contains a link and a comment of not much value. – nurettin Feb 13 '13 at 15:34

2

@jdw +1 for this answer and even I had the need to do this and your answer was helpful. But somehow I find that the 'scaled' checkbox appears a little distorted. I don't know if this is a thing with FF or my OS (Ubuntu 12.04). Thanks anyway :) – itsols Mar 5 '13 at 11:13

1

the scale() needs 2 parameters for chrome, FF and IE I think. So if you just change all the scales to scale(2,2) it should work every browser. – Onur Topal Mar 26 '13 at 14:44

1

This answer should be marked as it solved my problem too. Tried different approach but found this one as better among all – Shoaib Chikate Oct 21 '13 at 10:28

4

add transform: scale(2); too, to ensure more for any browser – Adriano Resende Jul 10 '15 at 15:43

| show 11 more comments

Nhan · Answer 2 · 2016-12-08 02:19:51Z

up vote 143 down vote

Working solution for all modern browsers.

input[type=checkbox] {
  transform: scale(1.5);
}

Compatibility:

IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Opera: 23+
iOS Safari: 9.2+
Chrome for Android: 51+

edited Dec 8 at 2:19

Nhan

2,05731427

answered Jul 11 '14 at 0:59

Numbers

3,34021629

1

Nice thanks, works a treat. – P Hemans Sep 14 '14 at 12:51

4

I was bored to death writing code to simulate the checkboxes/radiobuttons - this made my day :) – entiendoNull Oct 30 '14 at 19:01

1

@Huangism No, the code above won't have any effect in IE 8 which doesn't support the transform property. IE 9 supports -ms-transform which you could use, however some say it's quite pixelated so might be better to leave IE 9 with the default. – Simon East Feb 18 '15 at 2:49

2

Chrome supports it without prefixes now. – Daniel Herr Apr 10 '15 at 3:21

1

working on first look but pixelated in Chrome 47 – slindsey3000 Jan 17 at 20:41

| show 4 more comments

falsarella · Answer 3 · 2016-08-18 13:01:54Z

up vote 16 down vote

An easy solution is use the property zoom:

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

edited Aug 18 at 13:01

falsarella

6,60433069

answered Jan 14 '14 at 13:37

Luiz

17912

Not sure it works in all browsers, but it looks prettier on screen than the scale transform solution. – Gwened Jan 8 at 16:45

3

zoom property doesn't work in Firefox, caniuse.com/#feat=css-zoom – czerny Apr 27 at 18:40

add a comment |

empiric · Answer 4 · 2015-09-14 08:43:38Z

Preview: http://jsfiddle.net/h4qka9td/

CSS /* GLOBALS */

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

HTML Code

<div class="switch demo3">
  <input type="checkbox">
  <label><i></i>
  </label>
</div>

<div class="switch demo3">
  <input type="checkbox" checked>
  <label><i></i>
  </label>
</div>

Pretty checkboxes! But definitely not answering the original question.. — robertjd, Sep 19 '14 at 0:03

localshred · Answer 5 · 2008-11-20 21:48:40Z

My understanding is that this isn't easy at all to do cross-browser. Instead of trying to manipulate the checkbox control, you could always build your own implementation using images, javascript, and hidden input fields. I'm assuming this is similar to what niceforms is (from Staicu lonut's answer above), but wouldn't be particularly difficult to implement. I believe jQuery has a plugin to allow for this custom behavior as well (will look for the link and post here if I can find it).

Justin · Answer 6 · 2014-01-27 17:14:07Z

I was looking to make a checkbox that was just a little bit larger and looked at the source code for 37Signals Basecamp to find the following solution-

You can change the font size to make the checkbox slightly larger:

font-size: x-large;

Then, you can align the checkbox properly by doing:

vertical-align: top;
margin-top: 3px; /* change to center it */

Avi Flax · Answer 7 · 2010-06-28 12:55:08Z

up vote 2 down vote

Found this useful hint today: you can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: -webkit-transform: scale(1.3, 1.3);

answered Jun 28 '10 at 12:55

Avi Flax

28.1k73259

1

it works but the result is ugly with bigger scale ratios! – dwery Dec 17 '10 at 0:46

add a comment |

hcarreras · Answer 8 · 2016-11-02 12:16:03Z

The other answers showed a pixelated checkbox, while I wanted something beautiful. The result looks like this:

Even though this version is more complicated I think it's worth giving it a try.

HTML

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked", style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

SCSS

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;

  &:last-of-type {
    border-bottom: 0;
  }
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;

    &:before {
    position: absolute;
    display: block;
    width: 18px;
    height: 22px;
    top: -2px;
    left: 0px;
    padding-left: 2px;
    background-color: transparent;
    transition: background-color .3s ease;
    content: '\2713';
    font-family: initial;
    font-size: 19px;
    color: white;
  }
}

// Checked state
input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;

  &:before {
    background-color: #5bc0de;
  }
}

Jsfiddle: https://jsfiddle.net/asbd4hpr/

asked	8 years ago
viewed	276528 times
active	3 days ago

current community

your communities

more stack exchange communities

Checkbox size in HTML/CSS

8 Answers 8

protected by Community♦ Jan 19 at 17:52

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

Checkbox size in HTML/CSS

8 Answers 8

protected by Community♦ Jan 19 at 17:52

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Related

Hot Network Questions