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

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

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   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   lt label gt  lt input type  checkbox  gt  Test lt  label 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

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

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

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  lt label gt  is clickable using for yourinputID    x000D   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   lt div class  pretty  gt  x000D    lt input type  checkbox  id  demo  name  demo  gt  x000D    lt div class  pretty-inner  gt  lt label for  demo  gt I agree  lt  label gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  pretty  gt  x000D    lt input type  checkbox  id  demo  name  demo  gt  x000D    lt div class  pretty-inner checkmark  gt  lt label for  demo  gt Please check the box  lt  label gt  lt  div gt  x000D   lt  div 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

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

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

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

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

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

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

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 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   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   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   x000D   Screenshots  Chrome   Firefox   Edge   Edge  legacy    IE

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

Working solution for all modern browsers    x000D   x000D  input type checkbox    x000D      transform  scale 1 5   x000D    x000D   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   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

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

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

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

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   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   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   x000D   Screenshots  Chrome   Firefox   Edge   Edge  legacy    IE

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

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

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

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

Working solution for all modern browsers    x000D   x000D  input type checkbox    x000D      transform  scale 1 5   x000D    x000D   lt label gt  lt input type  checkbox  gt  Test lt  label gt  x000D   x000D   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

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

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   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   lt label gt  lt input type  checkbox  gt  Test lt  label 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  lt label gt  is clickable using for yourinputID    x000D   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   lt div class  pretty  gt  x000D    lt input type  checkbox  id  demo  name  demo  gt  x000D    lt div class  pretty-inner  gt  lt label for  demo  gt I agree  lt  label gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  pretty  gt  x000D    lt input type  checkbox  id  demo  name  demo  gt  x000D    lt div class  pretty-inner checkmark  gt  lt label for  demo  gt Please check the box  lt  label gt  lt  div gt  x000D   lt  div gt  x000D   x000D   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

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

Examples related to html

Examples related to css