Can I change the checkbox size using CSS?

Asked 20/11, 2008 at 21:34 Answered 26/2, 2023 at 8:15

586

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

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

Homy answered 20/11, 2008 at 21:34 Comment(4)

This is hard to do cross-browser. Roger Johansson has investigated this rather extensively. – Exhaustless 20/11, 2008 at 21:45

Reading all the comments - there is a really simple way to do this without involving CSS: <input type="checkbox" name="checkboxName" value="on" style="width:110%; height:110%" > – Daves 23/10, 2018 at 15:45

Use this simple ans: #57805894 – Gasify 5/9, 2019 at 13:18

@Daves the style= tag is CSS... – Astolat 10/6, 2020 at 19:3

535

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 */
  transform: scale(2);
  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>

Undershrub answered 2/5, 2012 at 13:58 Comment(14)

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. – Nonsuch 13/2, 2013 at 15:34

@Undershrub +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 :) – Moradabad 5/3, 2013 at 11:13

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. – Couturier 26/3, 2013 at 14:44

scale() is a perfect solution for android browsers – Galateah 10/5, 2013 at 10:45

The inputs look super blurry in IE when scaled up, even with both parameters. Can't seem to find a fix for this, even with the zoom property applied. – Wylma 30/10, 2013 at 18:25

Works great except when I try on a Retina display Macbook Pro. Anyone else have this issue? – Escribe 24/7, 2014 at 12:33

Warning: IE checkboxes are incredibly pixelated. Chrome uses SVGs for the checkbox apparently and they're able to cleanly scale it indefinitely. – Ism 5/11, 2014 at 20:6

All browsers except Safari and Android no longer require prefixes. – Sequacious 10/4, 2015 at 3:24

add transform: scale(2); too, to ensure more for any browser – Colonel 10/7, 2015 at 15:43

Unless you're still worried about IE8, just use scale() like in @Numbers response (see caniuse.com/#feat=transforms2d) – Jello 25/8, 2015 at 17:48

idk if this is something that chrome has changed recently but using scale makes these look blurry – Shope 25/9, 2015 at 2:8

You might want to adjust the padding and margin and also move the other elements appropriately as scaling does not increase the actual element size. – Tortious 26/11, 2015 at 22:37

In Safari, there is no visual difference between scale(1.5) and scale(2)... they render identically... like 1.1, 1.2, 1.5, etc. are always rounded up. – Berman 24/3, 2016 at 19:27

scaling looks aweful, at scale 2 you already see the individual pixels. I would never choose this solution for beautiful big css checkboxes. – Nakesha 16/1, 2018 at 14:21

502

Working solution for all modern browsers.

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

<label><input type="checkbox"> Test</label>

Compatibility:

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

Appearance:

Chrome 58 (May 2017), Windows 10

Bastogne answered 11/7, 2014 at 0:59 Comment(7)

Does this cover older browsers like ie 8? – Neille 11/9, 2014 at 16:7

@Neille 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. – Yiyid 18/2, 2015 at 2:49

Isn't above approach bad, because there is a limit for scale as it causes checkbox to be pixelated. – Flashy 5/4, 2016 at 8:29

Extremely pixelated on Chrome 64 with macOS 10.13.3 :( timo-ernst.net/misc/zeug/cb-pixel.jpg – Kansas 14/2, 2018 at 10:41

Still pixelated on Chrome 76. – Merlynmermaid 23/8, 2019 at 15:12

Doesn't look like this works at all anymore in Safari 13 on Mac OS Catalina.. can scale down below 1 but not up and above 1 – Wilful 18/2, 2020 at 17:53

What happens in my case is that things are increased in size but keeping its center position. So for example if I apply to <html>, the whole page goes of screen. Or if applied to an input, it goes over the label next to it. – Roughandready 9/9, 2022 at 13:49

An easy solution is use the property zoom:

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

<input type="checkbox" />

Sachs answered 14/1, 2014 at 13:37 Comment(5)

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

On Chrome 64 with macOS 10.13.3 this looks way less pixelated than using transform + scale – Kansas 14/2, 2018 at 10:43

Highly discouraged by Mozilla. developer.mozilla.org/en-US/docs/Web/CSS/zoom – Externality 11/8, 2019 at 22:34

It's kinda interesting that Mozilla is discouraging it while Firefox is almost the only browser that doesn't support it: caniuse.com/#feat=css-zoom – Darb 20/5, 2020 at 14:36

not supported in firefox – Exempt 18/11, 2021 at 8:49

2020 version - using pseudo-elements, size depends on font size.

Default checkbox/radio is rendered outside of screen, but CSS creates virtual elements very similar to default elements. Supports all browsers, no blur. Size depends on font size. Keyboard actions (space, tabs) are also supported.

https://jsfiddle.net/ohf7nmzy/2/

body{
    padding:0 20px;
}
.big{
    font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
    position: relative;
    line-height: 1.4;
}
/* radio */
input[type=radio]{
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=radio] + label:before{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border:none;
    border-radius: 50%;
    background-color: #bbbbbb;
}
input[type=radio] + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
    position:absolute;
    content:'';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
    border: 0.2em solid #8eb9fb;
    margin-top: -0.2em;
    margin-left: -0.2em;
    box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
    width: 1em;
    font-size: inherit;
    margin: 0;
    transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border:none;
    border-radius: 10%;
    background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
    position: absolute;
    content: '';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: white;
    border-radius: 10%;
    transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
    position:absolute;
    content:'';
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
    position: absolute;
    content: "\2713";
    left: -1.3em;
    top: 0;
    width: 1em;
    height: 1em;
    margin: 0;
    border: none;
    background-color: #3b88fd;
    border-radius: 10%;
    color: white;
    text-align: center;
    line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
    border: 0.1em solid #8eb9fb;
    margin-top: -0.1em;
    margin-left: -0.1em;
    box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
    <input type="checkbox" name="checkbox_3" id="gg" checked /> 
    <label for="gg">Checkbox big</label>

    <br />

    <input type="checkbox" name="checkbox_4" id="hh" /> 
    <label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
    <input type="radio" name="radio_2" id="cc" value="1" checked /> 
    <label for="cc">Radio big</label>

    <br />

    <input type="radio" name="radio_2" id="dd" value="2" /> 
    <label for="dd">Radio big</label>
</div>

2017 version - using zoom or scale

Browser will use non-standard zoom feature if it is supported (nice quality) or standard transform: scale (blurry on Safari) as fallback.

https://jsfiddle.net/ksvx2txb/11/

@supports (zoom:2) {
    input[type="radio"],  input[type=checkbox]{
    zoom: 2;
    }
}
@supports not (zoom:2) {
    input[type="radio"],  input[type=checkbox]{
        transform: scale(2);
        margin: 15px;
    }
}
label{
  /* fix vertical align issues */
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

Arcuation answered 19/6, 2017 at 8:48 Comment(1)

Zoom looks like it works fine on FQ. Maybe watch out for older versions of Gecko? – Rammish 9/4, 2018 at 20:10

I just came out with this:

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

Of course, thanks to this, you can change the value of content to your needs and use an image if you wish or use another font...

The main interest here is that:

The checkbox size stays proportional to the text size
You can control the aspect, the color, the size of the checkbox
No extra HTML needed !
Only 3 lines of CSS needed (the last one is just to give you ideas)

Edit: As pointed out in the comment, the checkbox won't be accessible by key navigation. You should probably add tabindex=0 as a property for your label to make it focusable.

Ambidexter answered 24/10, 2017 at 13:6 Comment(3)

Unfortunately, setting display:none on input will prevent it from being selected with tab key so I don't think this is a good idea. – Fertilize 19/10, 2018 at 13:34

Good remark. You could add tabindex=0 on the input to fix this. – Ambidexter 14/1, 2019 at 22:11

I wonder if all those CSS rules may confuse some accessibility features? – Territorialism 29/1, 2021 at 19:0

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

*,*: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;
}

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

Shannon answered 3/11, 2012 at 15:30 Comment(2)

@robertjd agreed, was confused about why this would be needed for a simple transform – Rammish 9/4, 2018 at 20:9

@robertjd Those aren't even checkboxes; they're toggles. – Skvorak 30/5, 2019 at 13:33

The appearance of checkboxes seems to be fixed by default. But as pointed out by Worthy7 this can be remedied using CSS appearance property. It will make checkboxes completely empty, so you can define your own appearance. What is nice about this: You can use your existing HTML code. Downside: It is experimental technology. Edge (legacy) and IE do not use the custom style.

Here are the needed CSS styles:

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}

<label><input type="checkbox"> Test</label>

Screenshots:

Chrome:

Firefox:

Edge:

Edge (legacy):

IE:

Menology answered 21/2, 2019 at 10:16 Comment(0)

This should work

input {
  width: 25px;
  height: 25px;
}

It worked for me for Firefox and Chrome and iPhone's Firefox, Chrome and Safari at least.

Andreandrea answered 11/7, 2021 at 1:37 Comment(0)

I think the simplest solution is re-style the checkbox as some users suggest. The CSS below is working for me, only requires a few lines of CSS, and answers the OP question:

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}

As mentioned in this post, the zoom property seems not to work on Firefox, and transforms may cause undesired effects.

Tested on Chrome and Firefox, should work for all modern browsers. Just change the properties (colors, size, bottom, left, etc.) to your needs. Hope it helps!

Immortality answered 14/7, 2019 at 2:50 Comment(0)

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 */

Tarrance answered 27/1, 2014 at 17:14 Comment(1)

font-size doesn't seem to affect the size of the actual checkbox at all – Uigur 11/5, 2017 at 16:33

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

Source

Jainism answered 28/6, 2010 at 12:55 Comment(0)

My reputation is slightly too low to post comments, but I made a modification to Jack Miller's code above in order to get it to not change size when you check and uncheck it. This was causing text alignment problems for me.

    input[type=checkbox] {
        width: 17px;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 17px;
        border: 1px solid black;
    }

    input[type=checkbox]:checked {
        background-color: #F58027;
    }

    input[type=checkbox]:checked:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        display: inline-block;
    }
    input[type=checkbox]:after {
        margin-left: 4px;
        margin-top: -1px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        display: inline-block;
    }

<label><input type="checkbox"> Test</label>

Tobias answered 29/1, 2021 at 18:13 Comment(0)

use this css code

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

Coss answered 16/6, 2021 at 20:20 Comment(0)

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

Eirene answered 20/11, 2008 at 21:48 Comment(0)

I found this CSS-only library to be very helpful: https://lokesh-coder.github.io/pretty-checkbox/

Or, you could roll your own with this same basic concept, similar to what @Sharcoux posted. It's basically:

Hide the normal checkbox (opacity 0 and placed where it would go)
Add a css-based fake checkbox
Use input:checked~div label for the checked style
make sure your <label> is clickable using for=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: '';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: '\2713';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>

Vacate answered 31/12, 2017 at 0:12 Comment(0)

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.

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item: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;
}
.checkbox-list__check: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;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}

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

JSFiddle: https://jsfiddle.net/asbd4hpr/

Caryloncaryn answered 2/11, 2016 at 12:16 Comment(0)

The problem is Firefox doesn't listen to width and height. Disable that and your good to go.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

<label><input type="checkbox"> Test</label>

Wittgenstein answered 27/4, 2017 at 1:20 Comment(1)

This simply makes the entire checkbox disappear. You then have to provide a background color to see it. But then how do you make the check mark appear? This answer is incomplete. – Madlynmadman 23/11, 2020 at 1:7

Put the checkbox inside a parent with display:grid and make sure it doesn't have margin:auto

https://codepen.io/sneffel/pen/oNPYvBx

 body{
     text-align:center;
}
 .grid{
    display:grid;
}
 input{
    height:25px;
}

<div class="container grid">
  <input type="checkbox" id="first">
</div>
<form class="container">
  <input type="checkbox" id="second">
</form>

Essy answered 26/2, 2023 at 8:15 Comment(0)

You can change the height and width in the code below

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}

<div class="check">

     <label class="container1">Architecture/Landscape
                                          

    <input type="checkbox" checked="checked">
                                          

    <span class="checkmark"></span>
                                 

    </label>
</div>

Shephard answered 3/12, 2018 at 7:23 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags