Can I change the checkbox size using CSS

Question

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

User · Answer

Preview  http   jsfiddle net h4qka9td    x000D   x000D      after   before   x000D    -webkit-box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    box-sizing  border-box  x000D    padding  0  x000D    margin  0  x000D    x000D   x000D   switch   x000D    margin  50px auto  x000D    position  relative  x000D    x000D   x000D   switch label   x000D    width  100   x000D    height  100   x000D    position  relative  x000D    display  block  x000D    x000D   x000D   switch input   x000D    top  0   x000D    right  0   x000D    bottom  0   x000D    left  0  x000D    opacity  0  x000D    z-index  100  x000D    position  absolute  x000D    width  100   x000D    height  100   x000D    cursor  pointer  x000D    x000D   x000D     DEMO 3    x000D   x000D   switch demo3   x000D    width  180px  x000D    height  50px  x000D    x000D   x000D   switch demo3 label   x000D    display  block  x000D    width  100   x000D    height  100   x000D    background   a5a39d  x000D    border-radius  40px  x000D    box-shadow  x000D        inset 0 3px 8px 1px rgba 0 0 0 0 2   x000D        0 1px 0 rgba 255 255 255 0 5   x000D    x000D   x000D   switch demo3 label after   x000D    content      x000D    position  absolute  x000D    z-index  -1  x000D    top  -8px  right  -8px  bottom  -8px  left  -8px  x000D    border-radius  inherit  x000D    background   ababab  x000D    background  -moz-linear-gradient  f2f2f2   ababab   x000D    background  -ms-linear-gradient  f2f2f2   ababab   x000D    background  -o-linear-gradient  f2f2f2   ababab   x000D    background  -webkit-gradient linear  0 0  0 100   from  f2f2f2   to  ababab    x000D    background  -webkit-linear-gradient  f2f2f2   ababab   x000D    background  linear-gradient  f2f2f2   ababab   x000D    box-shadow  0 0 10px rgba 0 0 0 0 3   x000D          0 1px 1px rgba 0 0 0 0 25   x000D    x000D   x000D   switch demo3 label before   x000D    content      x000D    position  absolute  x000D    z-index  -1  x000D    top  -18px  right  -18px  bottom  -18px  left  -18px  x000D    border-radius  inherit  x000D    background   eee  x000D    background  -moz-linear-gradient  e5e7e6   eee   x000D    background  -ms-linear-gradient  e5e7e6   eee   x000D    background  -o-linear-gradient  e5e7e6   eee   x000D    background  -webkit-gradient linear  0 0  0 100   from  e5e7e6   to  eee    x000D    background  -webkit-linear-gradient  e5e7e6   eee   x000D    background  linear-gradient  e5e7e6   eee   x000D    box-shadow  x000D        0 1px 0 rgba 255 255 255 0 5   x000D    -webkit-filter  blur 1px   x000D    -moz-filter  blur 1px   x000D    -ms-filter  blur 1px   x000D    -o-filter  blur 1px   x000D    filter  blur 1px   x000D    x000D   x000D   switch demo3 label i   x000D    display  block  x000D    height  100   x000D    width  60   x000D    border-radius  inherit  x000D    background  silver  x000D    position  absolute  x000D    z-index  2  x000D    right  40   x000D    top  0  x000D    background   b2ac9e  x000D    background  -moz-linear-gradient  f7f2f6   b2ac9e   x000D    background  -ms-linear-gradient  f7f2f6   b2ac9e   x000D    background  -o-linear-gradient  f7f2f6   b2ac9e   x000D    background  -webkit-gradient linear  0 0  0 100   from  f7f2f6   to  b2ac9e    x000D    background  -webkit-linear-gradient  f7f2f6   b2ac9e   x000D    background  linear-gradient  f7f2f6   b2ac9e   x000D    box-shadow  x000D        inset 0 1px 0 white  x000D        0 0 8px rgba 0 0 0 0 3   x000D        0 5px 5px rgba 0 0 0 0 2   x000D    x000D   x000D   switch demo3 label i after   x000D    content      x000D    position  absolute  x000D    left  15   x000D    top  25   x000D    width  70   x000D    height  50   x000D    background   d2cbc3  x000D    background  -moz-linear-gradient  cbc7bc   d2cbc3   x000D    background  -ms-linear-gradient  cbc7bc   d2cbc3   x000D    background  -o-linear-gradient  cbc7bc   d2cbc3   x000D    background  -webkit-gradient linear  0 0  0 100   from  cbc7bc   to  d2cbc3    x000D    background  -webkit-linear-gradient  cbc7bc   d2cbc3   x000D    background  linear-gradient  cbc7bc   d2cbc3   x000D    border-radius  inherit  x000D    x000D   x000D   switch demo3 label i before   x000D    content   off   x000D    text-transform  uppercase  x000D    font-style  normal  x000D    font-weight  bold  x000D    color  rgba 0 0 0 0 4   x000D    text-shadow  0 1px 0  bcb8ae  0 -1px 0  97958e  x000D    font-family  Helvetica  Arial  sans-serif  x000D    font-size  24px  x000D    position  absolute  x000D    top  50   x000D    margin-top  -12px  x000D    right  -50   x000D    x000D   x000D   switch demo3 input checked   label   x000D    background   9abb82  x000D    x000D   x000D   switch demo3 input checked   label i   x000D    right  -1   x000D    x000D   x000D   switch demo3 input checked   label i before   x000D    content   on   x000D    right  115   x000D    color   82a06a  x000D    text-shadow   x000D      0 1px 0  afcb9b  x000D      0 -1px 0  6b8659  x000D    x000D   lt div class  switch demo3  gt  x000D     lt input type  checkbox  gt  x000D     lt label gt  lt i gt  lt  i gt  x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   lt div class  switch demo3  gt  x000D     lt input type  checkbox  checked gt  x000D     lt label gt  lt i gt  lt  i gt  x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

The problem is Firefox doesn t listen to width and height  Disable that and your good to go    x000D   x000D  input type checkbox    x000D      width  25px  x000D      height  25px  x000D      -moz-appearance  none  x000D    x000D   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   x000D

User · Answer

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:

_x000D_

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

_x000D_

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

_x000D_

Screenshots:

Chrome:

Firefox:

Edge:

Edge (legacy):

IE:

User · Answer

Preview  http   jsfiddle net h4qka9td    x000D   x000D      after   before   x000D    -webkit-box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    box-sizing  border-box  x000D    padding  0  x000D    margin  0  x000D    x000D   x000D   switch   x000D    margin  50px auto  x000D    position  relative  x000D    x000D   x000D   switch label   x000D    width  100   x000D    height  100   x000D    position  relative  x000D    display  block  x000D    x000D   x000D   switch input   x000D    top  0   x000D    right  0   x000D    bottom  0   x000D    left  0  x000D    opacity  0  x000D    z-index  100  x000D    position  absolute  x000D    width  100   x000D    height  100   x000D    cursor  pointer  x000D    x000D   x000D     DEMO 3    x000D   x000D   switch demo3   x000D    width  180px  x000D    height  50px  x000D    x000D   x000D   switch demo3 label   x000D    display  block  x000D    width  100   x000D    height  100   x000D    background   a5a39d  x000D    border-radius  40px  x000D    box-shadow  x000D        inset 0 3px 8px 1px rgba 0 0 0 0 2   x000D        0 1px 0 rgba 255 255 255 0 5   x000D    x000D   x000D   switch demo3 label after   x000D    content      x000D    position  absolute  x000D    z-index  -1  x000D    top  -8px  right  -8px  bottom  -8px  left  -8px  x000D    border-radius  inherit  x000D    background   ababab  x000D    background  -moz-linear-gradient  f2f2f2   ababab   x000D    background  -ms-linear-gradient  f2f2f2   ababab   x000D    background  -o-linear-gradient  f2f2f2   ababab   x000D    background  -webkit-gradient linear  0 0  0 100   from  f2f2f2   to  ababab    x000D    background  -webkit-linear-gradient  f2f2f2   ababab   x000D    background  linear-gradient  f2f2f2   ababab   x000D    box-shadow  0 0 10px rgba 0 0 0 0 3   x000D          0 1px 1px rgba 0 0 0 0 25   x000D    x000D   x000D   switch demo3 label before   x000D    content      x000D    position  absolute  x000D    z-index  -1  x000D    top  -18px  right  -18px  bottom  -18px  left  -18px  x000D    border-radius  inherit  x000D    background   eee  x000D    background  -moz-linear-gradient  e5e7e6   eee   x000D    background  -ms-linear-gradient  e5e7e6   eee   x000D    background  -o-linear-gradient  e5e7e6   eee   x000D    background  -webkit-gradient linear  0 0  0 100   from  e5e7e6   to  eee    x000D    background  -webkit-linear-gradient  e5e7e6   eee   x000D    background  linear-gradient  e5e7e6   eee   x000D    box-shadow  x000D        0 1px 0 rgba 255 255 255 0 5   x000D    -webkit-filter  blur 1px   x000D    -moz-filter  blur 1px   x000D    -ms-filter  blur 1px   x000D    -o-filter  blur 1px   x000D    filter  blur 1px   x000D    x000D   x000D   switch demo3 label i   x000D    display  block  x000D    height  100   x000D    width  60   x000D    border-radius  inherit  x000D    background  silver  x000D    position  absolute  x000D    z-index  2  x000D    right  40   x000D    top  0  x000D    background   b2ac9e  x000D    background  -moz-linear-gradient  f7f2f6   b2ac9e   x000D    background  -ms-linear-gradient  f7f2f6   b2ac9e   x000D    background  -o-linear-gradient  f7f2f6   b2ac9e   x000D    background  -webkit-gradient linear  0 0  0 100   from  f7f2f6   to  b2ac9e    x000D    background  -webkit-linear-gradient  f7f2f6   b2ac9e   x000D    background  linear-gradient  f7f2f6   b2ac9e   x000D    box-shadow  x000D        inset 0 1px 0 white  x000D        0 0 8px rgba 0 0 0 0 3   x000D        0 5px 5px rgba 0 0 0 0 2   x000D    x000D   x000D   switch demo3 label i after   x000D    content      x000D    position  absolute  x000D    left  15   x000D    top  25   x000D    width  70   x000D    height  50   x000D    background   d2cbc3  x000D    background  -moz-linear-gradient  cbc7bc   d2cbc3   x000D    background  -ms-linear-gradient  cbc7bc   d2cbc3   x000D    background  -o-linear-gradient  cbc7bc   d2cbc3   x000D    background  -webkit-gradient linear  0 0  0 100   from  cbc7bc   to  d2cbc3    x000D    background  -webkit-linear-gradient  cbc7bc   d2cbc3   x000D    background  linear-gradient  cbc7bc   d2cbc3   x000D    border-radius  inherit  x000D    x000D   x000D   switch demo3 label i before   x000D    content   off   x000D    text-transform  uppercase  x000D    font-style  normal  x000D    font-weight  bold  x000D    color  rgba 0 0 0 0 4   x000D    text-shadow  0 1px 0  bcb8ae  0 -1px 0  97958e  x000D    font-family  Helvetica  Arial  sans-serif  x000D    font-size  24px  x000D    position  absolute  x000D    top  50   x000D    margin-top  -12px  x000D    right  -50   x000D    x000D   x000D   switch demo3 input checked   label   x000D    background   9abb82  x000D    x000D   x000D   switch demo3 input checked   label i   x000D    right  -1   x000D    x000D   x000D   switch demo3 input checked   label i before   x000D    content   on   x000D    right  115   x000D    color   82a06a  x000D    text-shadow   x000D      0 1px 0  afcb9b  x000D      0 -1px 0  6b8659  x000D    x000D   lt div class  switch demo3  gt  x000D     lt input type  checkbox  gt  x000D     lt label gt  lt i gt  lt  i gt  x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   lt div class  switch demo3  gt  x000D     lt input type  checkbox  checked gt  x000D     lt label gt  lt i gt  lt  i gt  x000D     lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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.

_x000D_

.checkbox-list__item {_x000D_
  position: relative;_x000D_
  padding: 10px 0;_x000D_
  display: block;_x000D_
  cursor: pointer;_x000D_
  margin: 0 0 0 34px;_x000D_
  border-bottom: 1px solid #b4bcc2;_x000D_
}_x000D_
.checkbox-list__item:last-of-type {_x000D_
  border-bottom: 0;_x000D_
}_x000D_
_x000D_
.checkbox-list__check {_x000D_
  width: 18px;_x000D_
  height: 18px;_x000D_
  border: 3px solid #b4bcc2;_x000D_
  position: absolute;_x000D_
  left: -34px;_x000D_
  top: 50%;_x000D_
  margin-top: -12px;_x000D_
  transition: border .3s ease;_x000D_
  border-radius: 5px;_x000D_
}_x000D_
.checkbox-list__check:before {_x000D_
  position: absolute;_x000D_
  display: block;_x000D_
  width: 18px;_x000D_
  height: 22px;_x000D_
  top: -2px;_x000D_
  left: 0px;_x000D_
  padding-left: 2px;_x000D_
  background-color: transparent;_x000D_
  transition: background-color .3s ease;_x000D_
  content: '\2713';_x000D_
  font-family: initial;_x000D_
  font-size: 19px;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
input[type="checkbox"]:checked ~ .checkbox-list__check {_x000D_
  border-color: #5bc0de;_x000D_
}_x000D_
input[type="checkbox"]:checked ~ .checkbox-list__check:before {_x000D_
  background-color: #5bc0de;_x000D_
}

_x000D_

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

_x000D_

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

User · Answer

The problem is Firefox doesn t listen to width and height  Disable that and your good to go    x000D   x000D  input type checkbox    x000D      width  25px  x000D      height  25px  x000D      -moz-appearance  none  x000D    x000D   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   x000D

User · Answer

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.

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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!

User · Answer

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

User · Answer

you can chnage the height and width in the code below   x000D   x000D   checkmark   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      height  20px  x000D      width  20px  x000D      border-radius 5px  x000D      border 1px solid  ff7e02  x000D    x000D   lt div class  check  gt  x000D   x000D        lt label class  container1  gt Architecture Landscape x000D               x000D   x000D       lt input type  checkbox  checked  checked  gt  x000D               x000D   x000D       lt span class  checkmark  gt  lt  span gt  x000D            x000D   x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

An easy solution is use the property zoom    x000D   x000D  input type  checkbox     x000D      zoom  1 5  x000D    x000D   lt input type  checkbox    gt  x000D   x000D   x000D

User · Answer

An easy solution is use the property zoom    x000D   x000D  input type  checkbox     x000D      zoom  1 5  x000D    x000D   lt input type  checkbox    gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    x000D   x000D  body  x000D   padding 0 20px  x000D    x000D   big  x000D   font-size  50px  x000D    x000D   x000D     CSS below will force radio checkbox size be same as font size    x000D  label  x000D   position  relative  x000D   line-height  1 4  x000D    x000D     radio    x000D  input type radio   x000D   width  1em  x000D   font-size  inherit  x000D   margin  0  x000D   transform  translateX -9999px   x000D    x000D  input type radio    label before  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border none  x000D   border-radius  50   x000D   background-color   bbbbbb  x000D    x000D  input type radio    label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  50   x000D   transform  scale 0 8   x000D    x000D    checked   x000D  input type radio  checked   label before  x000D   position absolute  x000D   content     x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D    x000D  input type radio  checked   label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  50   x000D   transform  scale 0 3   x000D    x000D    focused   x000D  input type radio  focus   label before  x000D   border  0 2em solid  8eb9fb  x000D   margin-top  -0 2em  x000D   margin-left  -0 2em  x000D   box-shadow  0 0 0 3em  3b88fd  x000D    x000D   x000D   x000D    checkbox    x000D  input type checkbox   x000D   width  1em  x000D   font-size  inherit  x000D   margin  0  x000D   transform  translateX -9999px   x000D    x000D  input type checkbox    label before  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border none  x000D   border-radius  10   x000D   background-color   bbbbbb  x000D    x000D  input type checkbox    label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  10   x000D   transform  scale 0 8   x000D    x000D    checked   x000D  input type checkbox  checked   label before  x000D   position absolute  x000D   content     x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D    x000D  input type checkbox  checked   label after  x000D   position  absolute  x000D   content    2713   x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D   border-radius  10   x000D   color  white  x000D   text-align  center  x000D   line-height  1  x000D    x000D    focused   x000D  input type checkbox  focus   label before  x000D   border  0 1em solid  8eb9fb  x000D   margin-top  -0 1em  x000D   margin-left  -0 1em  x000D   box-shadow  0 0 0 2em  3b88fd  x000D    x000D   lt input type  checkbox  name  checkbox 1  id  ee  checked   gt   x000D   lt label for  ee  gt Checkbox small lt  label gt  x000D   x000D   lt br   gt  x000D   x000D   lt input type  checkbox  name  checkbox 2  id  ff    gt   x000D   lt label for  ff  gt Checkbox small lt  label gt  x000D   x000D   lt hr   gt  x000D   x000D   lt div class  big  gt  x000D    lt input type  checkbox  name  checkbox 3  id  gg  checked   gt   x000D    lt label for  gg  gt Checkbox big lt  label gt  x000D   x000D    lt br   gt  x000D   x000D    lt input type  checkbox  name  checkbox 4  id  hh    gt   x000D    lt label for  hh  gt Checkbox big lt  label gt  x000D   lt  div gt  x000D   x000D   x000D   lt hr   gt  x000D   x000D   x000D   lt input type  radio  name  radio 1  id  aa  value  1  checked   gt   x000D   lt label for  aa  gt Radio small lt  label gt  x000D   x000D   lt br   gt  x000D   x000D   lt input type  radio  name  radio 1  id  bb  value  2    gt   x000D   lt label for  bb  gt Radio small lt  label gt  x000D   x000D   lt hr   gt  x000D   x000D   lt div class  big  gt  x000D    lt input type  radio  name  radio 2  id  cc  value  1  checked   gt   x000D    lt label for  cc  gt Radio big lt  label gt  x000D   x000D    lt br   gt  x000D   x000D    lt input type  radio  name  radio 2  id  dd  value  2    gt   x000D    lt label for  dd  gt Radio big lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    2017 version - using zoom or scale  Browser will use non-standard zoom feature if it is supported  nice quality  or standard transform  scale  blurry    Scaling works on all browsers  but it will be blurry on Firefox and Safari   https   jsfiddle net ksvx2txb 11    x000D   x000D   supports  zoom 2    x000D   input type  radio     input type checkbox   x000D   zoom  2  x000D     x000D    x000D   supports not  zoom 2    x000D   input type  radio     input type checkbox   x000D    transform  scale 2   x000D    margin  15px  x000D     x000D    x000D  label  x000D       fix vertical align issues    x000D   display  inline-block  x000D   vertical-align  top  x000D   margin-top  10px  x000D    x000D   lt input type  radio  name  aa  value  1  id  aa  checked   gt   x000D   lt label for  aa  gt Radio 1 lt  label gt  x000D   lt br   gt  x000D   lt input type  radio  name  aa  value  2  id  bb    gt   x000D   lt label for  bb  gt Radio 2 lt  label gt  x000D   x000D   lt br   gt  lt br   gt  x000D   x000D   lt input  type  checkbox  name  optiona  id  cc  checked   gt   x000D   lt label for  cc  gt Checkbox 1 lt  label gt  x000D   lt br   gt  x000D   lt input  type  checkbox  name  optiona  id  dd    gt   x000D   lt label for  dd  gt Checkbox 1 lt  label gt  x000D   x000D   x000D

User · Answer

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:

_x000D_

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

_x000D_

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

_x000D_

Screenshots:

Chrome:

Firefox:

Edge:

Edge (legacy):

IE:

User · Answer

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.

_x000D_

.checkbox-list__item {_x000D_
  position: relative;_x000D_
  padding: 10px 0;_x000D_
  display: block;_x000D_
  cursor: pointer;_x000D_
  margin: 0 0 0 34px;_x000D_
  border-bottom: 1px solid #b4bcc2;_x000D_
}_x000D_
.checkbox-list__item:last-of-type {_x000D_
  border-bottom: 0;_x000D_
}_x000D_
_x000D_
.checkbox-list__check {_x000D_
  width: 18px;_x000D_
  height: 18px;_x000D_
  border: 3px solid #b4bcc2;_x000D_
  position: absolute;_x000D_
  left: -34px;_x000D_
  top: 50%;_x000D_
  margin-top: -12px;_x000D_
  transition: border .3s ease;_x000D_
  border-radius: 5px;_x000D_
}_x000D_
.checkbox-list__check:before {_x000D_
  position: absolute;_x000D_
  display: block;_x000D_
  width: 18px;_x000D_
  height: 22px;_x000D_
  top: -2px;_x000D_
  left: 0px;_x000D_
  padding-left: 2px;_x000D_
  background-color: transparent;_x000D_
  transition: background-color .3s ease;_x000D_
  content: '\2713';_x000D_
  font-family: initial;_x000D_
  font-size: 19px;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
input[type="checkbox"]:checked ~ .checkbox-list__check {_x000D_
  border-color: #5bc0de;_x000D_
}_x000D_
input[type="checkbox"]:checked ~ .checkbox-list__check:before {_x000D_
  background-color: #5bc0de;_x000D_
}

_x000D_

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

_x000D_

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

User · Answer

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

User · Answer

I just came out with this    x000D   x000D  input type  checkbox    display none   x000D  input type  checkbox     label before  content       x000D  input checked   label before  content       x000D  label hover  color blue   x000D   lt input id  check  type  checkbox    gt  lt label for  check  gt Checkbox lt  label gt  x000D   x000D   x000D    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

User · Answer

It s a little ugly  due to the scaling up   but it works on most newer browsers    x000D   x000D  input type checkbox  x000D    x000D       Double-sized Checkboxes    x000D    -ms-transform  scale 2      IE    x000D    -moz-transform  scale 2      FF    x000D    -webkit-transform  scale 2      Safari and Chrome    x000D    -o-transform  scale 2      Opera    x000D    transform  scale 2   x000D    padding  10px  x000D    x000D   x000D     Might want to wrap a span around your checkbox text    x000D   checkboxtext x000D    x000D       Checkbox text    x000D    font-size  110   x000D    display  inline  x000D    x000D   lt input  type  checkbox  name  optiona  id  opta  checked   gt  x000D   lt span class  checkboxtext  gt  x000D    Option A x000D   lt  span gt  x000D   lt input type  checkbox  name  optionb  id  optb    gt  x000D   lt span class  checkboxtext  gt  x000D    Option B x000D   lt  span gt  x000D   lt input type  checkbox  name  optionc  id  optc    gt  x000D   lt span class  checkboxtext  gt  x000D    Option C x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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

_x000D_

.pretty {_x000D_
  position: relative;_x000D_
  margin: 1em;_x000D_
}_x000D_
.pretty input {_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  min-width: 1em;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  z-index: 2;_x000D_
  opacity: 0;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  cursor: pointer;_x000D_
}_x000D_
.pretty-inner {_x000D_
  box-sizing: border-box;_x000D_
  position: relative;_x000D_
}_x000D_
.pretty-inner label {_x000D_
  position: initial;_x000D_
  display: inline-block;_x000D_
  font-weight: 400;_x000D_
  margin: 0;_x000D_
  text-indent: 1.5em;_x000D_
  min-width: calc(1em + 2px);_x000D_
}_x000D_
.pretty-inner label:after,_x000D_
.pretty-inner label:before {_x000D_
  content: '';_x000D_
  width: calc(1em + 2px);_x000D_
  height: calc(1em + 2px);_x000D_
  display: block;_x000D_
  box-sizing: border-box;_x000D_
  border-radius: 0;_x000D_
  border: 1px solid transparent;_x000D_
  z-index: 0;_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  background-color: transparent;_x000D_
}_x000D_
.pretty-inner label:before {_x000D_
  border-color: #bdc3c7;_x000D_
}_x000D_
.pretty input:checked~.pretty-inner label:after {_x000D_
  background-color: #00bb82;_x000D_
  width: calc(1em - 6px);_x000D_
  height: calc(1em - 6px);_x000D_
  top: 4px;_x000D_
  left: 4px;_x000D_
}_x000D_
_x000D_
_x000D_
/* Add checkmark character style */_x000D_
.pretty input:checked~.pretty-inner.checkmark:after {_x000D_
  content: '\2713';_x000D_
  color: #fff;_x000D_
  position: absolute;_x000D_
  font-size: 0.65em;_x000D_
  left: 6px;_x000D_
  top: 3px;_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
body {_x000D_
  font-size: 20px;_x000D_
  font-family: sans-serif;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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

_x000D_

.pretty {_x000D_
  position: relative;_x000D_
  margin: 1em;_x000D_
}_x000D_
.pretty input {_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  min-width: 1em;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  z-index: 2;_x000D_
  opacity: 0;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  cursor: pointer;_x000D_
}_x000D_
.pretty-inner {_x000D_
  box-sizing: border-box;_x000D_
  position: relative;_x000D_
}_x000D_
.pretty-inner label {_x000D_
  position: initial;_x000D_
  display: inline-block;_x000D_
  font-weight: 400;_x000D_
  margin: 0;_x000D_
  text-indent: 1.5em;_x000D_
  min-width: calc(1em + 2px);_x000D_
}_x000D_
.pretty-inner label:after,_x000D_
.pretty-inner label:before {_x000D_
  content: '';_x000D_
  width: calc(1em + 2px);_x000D_
  height: calc(1em + 2px);_x000D_
  display: block;_x000D_
  box-sizing: border-box;_x000D_
  border-radius: 0;_x000D_
  border: 1px solid transparent;_x000D_
  z-index: 0;_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 0;_x000D_
  background-color: transparent;_x000D_
}_x000D_
.pretty-inner label:before {_x000D_
  border-color: #bdc3c7;_x000D_
}_x000D_
.pretty input:checked~.pretty-inner label:after {_x000D_
  background-color: #00bb82;_x000D_
  width: calc(1em - 6px);_x000D_
  height: calc(1em - 6px);_x000D_
  top: 4px;_x000D_
  left: 4px;_x000D_
}_x000D_
_x000D_
_x000D_
/* Add checkmark character style */_x000D_
.pretty input:checked~.pretty-inner.checkmark:after {_x000D_
  content: '\2713';_x000D_
  color: #fff;_x000D_
  position: absolute;_x000D_
  font-size: 0.65em;_x000D_
  left: 6px;_x000D_
  top: 3px;_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
body {_x000D_
  font-size: 20px;_x000D_
  font-family: sans-serif;_x000D_
}

_x000D_

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

_x000D_

User · Answer

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    x000D   x000D  body  x000D   padding 0 20px  x000D    x000D   big  x000D   font-size  50px  x000D    x000D   x000D     CSS below will force radio checkbox size be same as font size    x000D  label  x000D   position  relative  x000D   line-height  1 4  x000D    x000D     radio    x000D  input type radio   x000D   width  1em  x000D   font-size  inherit  x000D   margin  0  x000D   transform  translateX -9999px   x000D    x000D  input type radio    label before  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border none  x000D   border-radius  50   x000D   background-color   bbbbbb  x000D    x000D  input type radio    label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  50   x000D   transform  scale 0 8   x000D    x000D    checked   x000D  input type radio  checked   label before  x000D   position absolute  x000D   content     x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D    x000D  input type radio  checked   label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  50   x000D   transform  scale 0 3   x000D    x000D    focused   x000D  input type radio  focus   label before  x000D   border  0 2em solid  8eb9fb  x000D   margin-top  -0 2em  x000D   margin-left  -0 2em  x000D   box-shadow  0 0 0 3em  3b88fd  x000D    x000D   x000D   x000D    checkbox    x000D  input type checkbox   x000D   width  1em  x000D   font-size  inherit  x000D   margin  0  x000D   transform  translateX -9999px   x000D    x000D  input type checkbox    label before  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border none  x000D   border-radius  10   x000D   background-color   bbbbbb  x000D    x000D  input type checkbox    label after  x000D   position  absolute  x000D   content      x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color  white  x000D   border-radius  10   x000D   transform  scale 0 8   x000D    x000D    checked   x000D  input type checkbox  checked   label before  x000D   position absolute  x000D   content     x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D    x000D  input type checkbox  checked   label after  x000D   position  absolute  x000D   content    2713   x000D   left  -1 3em  x000D   top  0  x000D   width  1em  x000D   height  1em  x000D   margin  0  x000D   border  none  x000D   background-color   3b88fd  x000D   border-radius  10   x000D   color  white  x000D   text-align  center  x000D   line-height  1  x000D    x000D    focused   x000D  input type checkbox  focus   label before  x000D   border  0 1em solid  8eb9fb  x000D   margin-top  -0 1em  x000D   margin-left  -0 1em  x000D   box-shadow  0 0 0 2em  3b88fd  x000D    x000D   lt input type  checkbox  name  checkbox 1  id  ee  checked   gt   x000D   lt label for  ee  gt Checkbox small lt  label gt  x000D   x000D   lt br   gt  x000D   x000D   lt input type  checkbox  name  checkbox 2  id  ff    gt   x000D   lt label for  ff  gt Checkbox small lt  label gt  x000D   x000D   lt hr   gt  x000D   x000D   lt div class  big  gt  x000D    lt input type  checkbox  name  checkbox 3  id  gg  checked   gt   x000D    lt label for  gg  gt Checkbox big lt  label gt  x000D   x000D    lt br   gt  x000D   x000D    lt input type  checkbox  name  checkbox 4  id  hh    gt   x000D    lt label for  hh  gt Checkbox big lt  label gt  x000D   lt  div gt  x000D   x000D   x000D   lt hr   gt  x000D   x000D   x000D   lt input type  radio  name  radio 1  id  aa  value  1  checked   gt   x000D   lt label for  aa  gt Radio small lt  label gt  x000D   x000D   lt br   gt  x000D   x000D   lt input type  radio  name  radio 1  id  bb  value  2    gt   x000D   lt label for  bb  gt Radio small lt  label gt  x000D   x000D   lt hr   gt  x000D   x000D   lt div class  big  gt  x000D    lt input type  radio  name  radio 2  id  cc  value  1  checked   gt   x000D    lt label for  cc  gt Radio big lt  label gt  x000D   x000D    lt br   gt  x000D   x000D    lt input type  radio  name  radio 2  id  dd  value  2    gt   x000D    lt label for  dd  gt Radio big lt  label gt  x000D   lt  div gt  x000D   x000D   x000D    2017 version - using zoom or scale  Browser will use non-standard zoom feature if it is supported  nice quality  or standard transform  scale  blurry    Scaling works on all browsers  but it will be blurry on Firefox and Safari   https   jsfiddle net ksvx2txb 11    x000D   x000D   supports  zoom 2    x000D   input type  radio     input type checkbox   x000D   zoom  2  x000D     x000D    x000D   supports not  zoom 2    x000D   input type  radio     input type checkbox   x000D    transform  scale 2   x000D    margin  15px  x000D     x000D    x000D  label  x000D       fix vertical align issues    x000D   display  inline-block  x000D   vertical-align  top  x000D   margin-top  10px  x000D    x000D   lt input type  radio  name  aa  value  1  id  aa  checked   gt   x000D   lt label for  aa  gt Radio 1 lt  label gt  x000D   lt br   gt  x000D   lt input type  radio  name  aa  value  2  id  bb    gt   x000D   lt label for  bb  gt Radio 2 lt  label gt  x000D   x000D   lt br   gt  lt br   gt  x000D   x000D   lt input  type  checkbox  name  optiona  id  cc  checked   gt   x000D   lt label for  cc  gt Checkbox 1 lt  label gt  x000D   lt br   gt  x000D   lt input  type  checkbox  name  optiona  id  dd    gt   x000D   lt label for  dd  gt Checkbox 1 lt  label gt  x000D   x000D   x000D

User · Answer

Working solution for all modern browsers.

_x000D_

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

_x000D_

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

_x000D_

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

User · Answer

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

User · Answer

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

User · Answer

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.

_x000D_

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

_x000D_

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

_x000D_

User · Answer

I just came out with this    x000D   x000D  input type  checkbox    display none   x000D  input type  checkbox     label before  content       x000D  input checked   label before  content       x000D  label hover  color blue   x000D   lt input id  check  type  checkbox    gt  lt label for  check  gt Checkbox lt  label gt  x000D   x000D   x000D    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

User · Answer

you can chnage the height and width in the code below   x000D   x000D   checkmark   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      height  20px  x000D      width  20px  x000D      border-radius 5px  x000D      border 1px solid  ff7e02  x000D    x000D   lt div class  check  gt  x000D   x000D        lt label class  container1  gt Architecture Landscape x000D               x000D   x000D       lt input type  checkbox  checked  checked  gt  x000D               x000D   x000D       lt span class  checkmark  gt  lt  span gt  x000D            x000D   x000D    lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It s a little ugly  due to the scaling up   but it works on most newer browsers    x000D   x000D  input type checkbox  x000D    x000D       Double-sized Checkboxes    x000D    -ms-transform  scale 2      IE    x000D    -moz-transform  scale 2      FF    x000D    -webkit-transform  scale 2      Safari and Chrome    x000D    -o-transform  scale 2      Opera    x000D    transform  scale 2   x000D    padding  10px  x000D    x000D   x000D     Might want to wrap a span around your checkbox text    x000D   checkboxtext x000D    x000D       Checkbox text    x000D    font-size  110   x000D    display  inline  x000D    x000D   lt input  type  checkbox  name  optiona  id  opta  checked   gt  x000D   lt span class  checkboxtext  gt  x000D    Option A x000D   lt  span gt  x000D   lt input type  checkbox  name  optionb  id  optb    gt  x000D   lt span class  checkboxtext  gt  x000D    Option B x000D   lt  span gt  x000D   lt input type  checkbox  name  optionc  id  optc    gt  x000D   lt span class  checkboxtext  gt  x000D    Option C x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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!

User · Answer

Working solution for all modern browsers.

_x000D_

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

_x000D_

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

_x000D_

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

User · Answer

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

[html] Can I change the checkbox size using CSS?

The answer is

Examples related to html

Examples related to css

Tags