How to style a checkbox using CSS

Question

I am trying to style a checkbox using the following:

_x000D_

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

_x000D_

But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

User · Answer

Quick fix to add icon in front of text    lt  asp CheckBox    Text   lt  img src   link to img png    gt My Text    gt

User · Answer

You can avoid adding extra markup  This works everywhere except IE for Desktop  but works in IE for Windows Phone and Microsoft Edge  via setting CSS appearance    x000D   x000D  input type  checkbox     x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D   x000D       Styling checkbox    x000D    width  16px  x000D    height  16px  x000D    background-color  red  x000D    x000D   x000D  input type  checkbox   checked   x000D    background-color  green  x000D    x000D   lt input type  checkbox    gt  x000D   x000D   x000D

User · Answer

Here is a simple CSS solution without any jQuery or JavaScript code.

I am using FontAwseome icons but you can use any image

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

User · Answer

Warning  the following was true at the time of writing  but in the meantime things have progressed   AFAIK modern browsers display checkboxes using the native OS control  so there s no way to style them

User · Answer

UPDATE  The below answer references the state of things before widespread availability of CSS  3  In modern browsers  including Internet Explorer 9 and later  it is more straightforward to create checkbox replacements with your preferred styling  without using JavaScript  Here are some useful links   Creating Custom Form Checkboxes with Just CSS Easy CSS Checkbox Generator Stuff You Can Do With The Checkbox Hack Implementing Custom Checkboxes and Radio Buttons with CSS3 How to Style a Checkbox With CSS  It is worth noting that the fundamental issue has not changed  You still can t apply styles  borders  etc   directly to the checkbox element and have those styles affect the display of the HTML checkbox  What has changed  however  is that it s now possible to hide the actual checkbox and replace it with a styled element of your own  using nothing but CSS  In particular  because CSS now has a widely supported  checked selector  you can make your replacement correctly reflect the checked status of the box   OLDER ANSWER Here s a useful article about styling checkboxes   Basically  that writer found that it varies tremendously from browser to browser  and that many browsers always display the default checkbox no matter how you style it  So there really isn t an easy way  It s not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked  Users without JavaScript would see the default checkbox  Edited to add  here s a nice script that does this for you  it hides the real checkbox element  replaces it with a styled span  and redirects the click events

User · Answer

With pure CSS  nothing fancy with  before and  after  no transforms  you can turn off the default appearance and then style it with an inline background image like the following example  This works in Chrome  Firefox  Safari  and now Edge  Chromium Edge    x000D   x000D  INPUT type checkbox  focus       outline  1px solid rgba 0  0  0  0 2      INPUT type checkbox        background-color   DDD      border-radius  2px      appearance  none      -webkit-appearance  none      -moz-appearance  none      width  17px      height  17px      cursor  pointer      position  relative      top  5px     INPUT type checkbox  checked       background-color   409fd6      background   409fd6 url  data image gif base64 R0lGODlhCwAKAIABAP    3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH AC73WHIsw0UCjglraO20PNhYAOw     3px 3px no-repeat    x000D   lt form gt     lt label gt  lt input type  checkbox  gt  I Agree To Terms  amp amp  Conditions lt  label gt   lt  form gt  x000D   x000D   x000D

User · Answer

Since browsers like Edge and Firefox do not support :before :after on checkbox input tags, here is an alternative purely with HTML and CSS. Of course you should edit CSS according to your requirements.

Make the HTML for checkbox like this:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Apply this style for the checkbox to change the color label

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

User · Answer

I d follow the advice of SW4 s answer     to hide the checkbox and to cover it with a custom span  suggesting this HTML   lt label gt     lt input type  quot checkbox quot  gt     lt span gt send newsletter lt  span gt   lt  label gt   The wrap in label neatly allows clicking the text without the need of  quot for-id quot  attribute linking  However  Do not hide it using visibility  hidden or display  none It works by clicking or tapping  but that is a lame way to use checkboxes  Some people still use much more effective Tab to move focus  Space to activate  and hiding with that method disables it  If the form is long  one will save someone s wrists to use tabindex or accesskey attributes  And if you observe the system checkbox behavior  there is a decent shadow on hover  The well styled checkbox should follow this behavior  cobberboy s answer recommends Font Awesome which is usually better than bitmap since fonts are scalable vectors  Working with the HTML above  I d suggest these CSS rules   Hide checkboxes   input type  quot checkbox quot        position  absolute     opacity  0     z-index  -1      I use just negative z-index since my example uses big enough checkbox skin to cover it fully  I don t recommend left  -999px since it is not reusable in every layout  Bushan wagh s answer provides a bulletproof way to hide it and convince the browser to use tabindex  so it is a good alternative  Anyway  both is just a hack  The proper way today is appearance  none  see Joost s answer    input type  quot checkbox quot        appearance  none     -webkit-appearance  none     -moz-appearance  none       Style checkbox label   input type  quot checkbox quot     span      font  16pt sans-serif     color   000       Add checkbox skin   input type  quot checkbox quot     span before      font  16pt FontAwesome     content    00f096      display  inline-block     width  16pt     padding  2px 0 0 3px     margin-right  0 5em         00f096 is Font Awesome s square-o  padding is adjusted to provide even dotted outline on focus  see below    Add checkbox checked skin   input type  quot checkbox quot   checked   span before      content    00f046          00f046 is Font Awesome s check-square-o  which is not the same width as square-o  which is the reason for the width style above   Add focus outline   input type  quot checkbox quot   focus   span before      outline  1px dotted  aaa      Safari doesn t provide this feature  see  Jason Sankey s comment   see this answer for Safari-only CSS  Set gray color for disabled checkbox   input type  quot checkbox quot   disabled   span      color   999       Set hover shadow on non-disabled checkbox   input type  quot checkbox quot   not  disabled    span hover before      text-shadow  0 1px 2px  77F         Test it on JS Fiddle Try to hover the mouse over the checkboxes and use Tab and Shift Tab to move and Space to toggle

User · Answer

This is simplest way and you can choose which checkboxes to give this style.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

User · Answer

SCSS   SASS Implementation  A more modern approach  For those using SCSS  or easily converted to SASS   the following will be helpful  Effectively  make an element next to the checkbox  which is the one that you will style  When the checkbox is clicked  the CSS restyles the sister element  to your new  checked style   Code is below    x000D   x000D  label checkbox   x000D    input type  checkbox     x000D      visibility  hidden  x000D      display  block  x000D      height  0  x000D      width  0  x000D      position  absolute  x000D      overflow  hidden  x000D   x000D       amp  checked   span   x000D        background   accent  x000D        x000D      x000D   x000D    span   x000D      cursor  pointer  x000D      height  15px  x000D      width  15px  x000D      border  1px solid  accent  x000D      border-radius  2px  x000D      display  inline-block  x000D      transition  all 0 2s  interpol  x000D      x000D    x000D   lt label class  checkbox  gt  x000D       lt input type  checkbox    gt  x000D       lt span gt  lt  span gt  x000D      Label text x000D   lt  label gt  x000D   x000D   x000D

User · Answer

Custom checkbox with css     WebKit browser solution only Chrome  Safari  Mobile browsers        lt input type  checkbox  id  cardAccptance  name  cardAccptance  value  Yes  gt       lt label for  cardAccptance  class  bold  gt  Save Card for Future Use lt  label gt          The checkbox-cu          checkbox-cu           display  block          position  relative          padding-left  35px          margin-bottom  0          cursor  pointer          font-size  16px          -webkit-user-select  none          -moz-user-select  none          -ms-user-select  none          user-select  none                 Hide the browser s default checkbox-cu          checkbox-cu input           position  absolute          opacity  0          cursor  pointer          height  0          width  0                 Create a custom checkbox-cu          checkmark           position  absolute          top  4px          left  0          height  20px          width  20px          background-color   eee          border  1px solid  999          border-radius  0          box-shadow  none                 On mouse-over  add a grey background color          checkbox-cu hover input  checkmark           background-color   ccc                 When the checkbox-cu is checked  add a blue background          checkbox-cu input checked  checkmark           background-color  transparent                 Create the checkmark indicator  hidden when not checked           checkmark after           content              position  absolute          display  none                 Show the checkmark when checked          checkbox-cu input checked  checkmark after           display  block                 Style the checkmark indicator          checkbox-cu  checkmark  after           left  7px          top  3px          width  6px          height  9px          border  solid  28a745          border-width  0 2px 2px 0          -webkit-transform  rotate 45deg           -ms-transform  rotate 45deg           transform  rotate 45deg           z-index  100

User · Answer

Simple to implement and easily customizable solution

After a lot of search and testing I got this solution which is simple to implement and easier to customize. In this solution:

You don't need external libraries and files
You don't need to add extra HTML in your page
You don't need to change checkbox names and id

Simple put the flowing CSS at the top of your page and all checkboxes style will change like this:

_x000D_

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

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

_x000D_

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

_x000D_

User · Answer

Recently I found a quite interesting solution to the problem.

You could use appearance: none; to turn off the checkbox's default style and then write your own over it like described here (Example 4).

Example fiddle

_x000D_

input[type=checkbox] {_x000D_
  width: 23px;_x000D_
  height: 23px;_x000D_
  -webkit-appearance: none;_x000D_
  -moz-appearance: none;_x000D_
  appearance: none;_x000D_
  margin-right: 10px;_x000D_
  background-color: #878787;_x000D_
  outline: 0;_x000D_
  border: 0;_x000D_
  display: inline-block;_x000D_
  -webkit-box-shadow: none !important;_x000D_
  -moz-box-shadow: none !important;_x000D_
  box-shadow: none !important;_x000D_
}_x000D_
_x000D_
input[type=checkbox]:focus {_x000D_
  outline: none;_x000D_
  border: none !important;_x000D_
  -webkit-box-shadow: none !important;_x000D_
  -moz-box-shadow: none !important;_x000D_
  box-shadow: none !important;_x000D_
}_x000D_
_x000D_
input[type=checkbox]:checked {_x000D_
  background-color: green;_x000D_
  text-align: center;_x000D_
  line-height: 15px;_x000D_
}

_x000D_

<input type="checkbox">

_x000D_

Unfortunately browser support is quite bad for the appearance option. From my personal testing I only got Opera and Chrome working correctly. But this would be the way to go to keep it simple when better support comes or you only want to use Chrome/Opera.

"Can I use?" link

User · Answer

You can simply use appearance  none on modern browsers  so that there is no default styling and all your styles are applied properly   input type checkbox      -webkit-appearance  none    -moz-appearance  none    appearance  none    display  inline-block    width  2em    height  2em    border  1px solid gray    outline  none    vertical-align  middle     input type checkbox  checked     background-color  blue

User · Answer

From my googling  this is the easiest way for checkbox styling  Just add  after and  checked after CSS based on your design     x000D   x000D  body  x000D    background   DDD  x000D    x000D  span  x000D    margin-left  30px  x000D    x000D  input type checkbox    x000D      cursor  pointer  x000D      font-size  17px  x000D      visibility  hidden  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      transform  scale 1 5   x000D    x000D   x000D  input type checkbox  after   x000D      content       x000D      background-color   fff  x000D      display  inline-block  x000D      color   00BFF0  x000D      width  14px  x000D      height  19px  x000D      visibility  visible  x000D      border  1px solid  FFF  x000D      padding  0 3px  x000D      margin  2px 0  x000D      border-radius  8px  x000D      box-shadow  0 0 15px 0 rgba 0 0 0 0 08   0 0 2px 0 rgba 0 0 0 0 16   x000D    x000D   x000D  input type checkbox  checked after   x000D      content    2714   x000D      display  unset  x000D      font-weight  bold  x000D    x000D   lt input type  checkbox  gt   lt span gt Select Text lt  span gt  x000D   x000D   x000D

User · Answer

2021 solution - accessible pure CSS checkboxes and radio buttons with no external dependencies

I have been scrolling and scrolling and tons of these answers simply throw accessibility out the door and violate WCAG in more than one way. I threw in radio buttons since most of the time when you're using custom checkboxes you want custom radio buttons too.

Fiddles:

Checkboxes - pure CSS - free from 3rd party libraries
Radio buttons - pure CSS - free from 3rd party libraries
Checkboxes* that use FontAwesome but could be swapped with Glyphicons, etc. easily

Late to the party but somehow this is still difficult in ~~2019~~, ~~2020~~, 2021 so I have added my three solutions which are accessible and easy to drop in.

These are all JavaScript free, accessible, and external library free*...

If you want to plug-n-play with any of these just copy the style sheet from the fiddles, edit the color codes in the CSS to fit your needs, and be on your way. You can add a custom svg checkmark icon if you want for the checkboxes. I've added lots of comments for those non-CSS'y folks.

If you have long text or a small container and are encountering text wrapping underneath the checkbox or radio button input then just convert to divs like this.

Longer explanation: I needed a solution that does not violate WCAG, doesn't rely on JavaScript or external libraries, and that does not break keyboard navigation like tabbing or spacebar to select, that allows focus events, a solution that allows for disabled checkboxes that are both checked and unchecked, and finally a solution where I can customize the look of the checkbox however I want with different background-color's, border-radius, svg backgrounds, etc.

I used some combination of this answer from @Jan Turon to come up with my own solution which seems to work quite well. I've done a radio button fiddle that uses a lot of the same code from the checkboxes in order to make this work with radio buttons too.

I am still learning accessibility so if I missed something please drop a comment and I will try to correct it here is a code example of my checkboxes:

_x000D_

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

_x000D_

<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<p>You can easily change the background color, checkbox symbol, border-radius, etc.</p>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>

_x000D_

User · Answer

You can achieve quite a cool custom checkbox effect by using the new abilities that come with the :after and :before pseudo classes. The advantage to this, is: You don't need to add anything more to the DOM, just the standard checkbox.

Note this will only work for compatible browsers. I believe this is related to the fact that some browsers do not allow you to set :after and :before on input elements. Which unfortunately means for the moment only WebKit browsers are supported. Firefox + Internet Explorer will still allow the checkboxes to function, just unstyled, and this will hopefully change in the future (the code does not use vendor prefixes).

This is a WebKit browser solution only (Chrome, Safari, Mobile browsers)

See Example Fiddle

_x000D_

$(function() {_x000D_
  $('input').change(function() {_x000D_
    $('div').html(Math.random());_x000D_
  });_x000D_
});

_x000D_

/* Main Classes */_x000D_
.myinput[type="checkbox"]:before {_x000D_
  position: relative;_x000D_
  display: block;_x000D_
  width: 11px;_x000D_
  height: 11px;_x000D_
  border: 1px solid #808080;_x000D_
  content: "";_x000D_
  background: #FFF;_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:after {_x000D_
  position: relative;_x000D_
  display: block;_x000D_
  left: 2px;_x000D_
  top: -11px;_x000D_
  width: 7px;_x000D_
  height: 7px;_x000D_
  border-width: 1px;_x000D_
  border-style: solid;_x000D_
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;_x000D_
  content: "";_x000D_
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);_x000D_
  background-repeat: no-repeat;_x000D_
  background-position: center;_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:checked:after {_x000D_
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:disabled:after {_x000D_
  -webkit-filter: opacity(0.4);_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:not(:disabled):checked:hover:after {_x000D_
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:not(:disabled):hover:after {_x000D_
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);_x000D_
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;_x000D_
}_x000D_
_x000D_
.myinput[type="checkbox"]:not(:disabled):hover:before {_x000D_
  border-color: #3D7591;_x000D_
}_x000D_
_x000D_
/* Large checkboxes */_x000D_
.myinput.large {_x000D_
  height: 22px;_x000D_
  width: 22px;_x000D_
}_x000D_
_x000D_
.myinput.large[type="checkbox"]:before {_x000D_
  width: 20px;_x000D_
  height: 20px;_x000D_
}_x000D_
_x000D_
.myinput.large[type="checkbox"]:after {_x000D_
  top: -20px;_x000D_
  width: 16px;_x000D_
  height: 16px;_x000D_
}_x000D_
_x000D_
/* Custom checkbox */_x000D_
.myinput.large.custom[type="checkbox"]:checked:after {_x000D_
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);_x000D_
}_x000D_
_x000D_
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {_x000D_
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<table style="width:100%">_x000D_
  <tr>_x000D_
    <td>Normal:</td>_x000D_
    <td><input type="checkbox" /></td>_x000D_
    <td><input type="checkbox" checked="checked" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>Small:</td>_x000D_
    <td><input type="checkbox" class="myinput" /></td>_x000D_
    <td><input type="checkbox" checked="checked" class="myinput" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>Large:</td>_x000D_
    <td><input type="checkbox" class="myinput large" /></td>_x000D_
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td>Custom icon:</td>_x000D_
    <td><input type="checkbox" class="myinput large custom" /></td>_x000D_
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>_x000D_
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>_x000D_
  </tr>_x000D_
</table>

_x000D_

Bonus Webkit style flipswitch fiddle

_x000D_

$(function() {_x000D_
  var f = function() {_x000D_
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');_x000D_
  };_x000D_
  $('input').change(f).trigger('change');_x000D_
});

_x000D_

body {_x000D_
  font-family: arial;_x000D_
}_x000D_
_x000D_
.flipswitch {_x000D_
  position: relative;_x000D_
  background: white;_x000D_
  width: 120px;_x000D_
  height: 40px;_x000D_
  -webkit-appearance: initial;_x000D_
  border-radius: 3px;_x000D_
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);_x000D_
  outline: none;_x000D_
  font-size: 14px;_x000D_
  font-family: Trebuchet, Arial, sans-serif;_x000D_
  font-weight: bold;_x000D_
  cursor: pointer;_x000D_
  border: 1px solid #ddd;_x000D_
}_x000D_
_x000D_
.flipswitch:after {_x000D_
  position: absolute;_x000D_
  top: 5%;_x000D_
  display: block;_x000D_
  line-height: 32px;_x000D_
  width: 45%;_x000D_
  height: 90%;_x000D_
  background: #fff;_x000D_
  box-sizing: border-box;_x000D_
  text-align: center;_x000D_
  transition: all 0.3s ease-in 0s;_x000D_
  color: black;_x000D_
  border: #888 1px solid;_x000D_
  border-radius: 3px;_x000D_
}_x000D_
_x000D_
.flipswitch:after {_x000D_
  left: 2%;_x000D_
  content: "OFF";_x000D_
}_x000D_
_x000D_
.flipswitch:checked:after {_x000D_
  left: 53%;_x000D_
  content: "ON";_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>_x000D_
_x000D_
<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>_x000D_
<input type="checkbox" class="flipswitch" /> &nbsp;_x000D_
<span></span>_x000D_
<br>_x000D_
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;_x000D_
<span></span>

_x000D_

User · Answer

input type checkbox  css-checkbox       position  absolute      overflow  hidden      clip  rect 0 0 0 0       height  1px      width  1px      margin  -1px      padding  0      border  0     input type checkbox  css-checkbox   label css-label       padding-left  20px      height  15px      display  inline-block      line-height  15px      background-repeat  no-repeat      background-position  0 0      font-size  15px      vertical-align  middle      cursor  pointer     input type checkbox  css-checkbox checked   label css-label       background-position  0 -15px      css-label      background-image url http   csscheckbox com checkboxes dark-check-green png

User · Answer

There is a way to do this using just CSS. We can (ab)use the label element and style that element instead. The caveat is that this will not work for Internet Explorer 8 and lower versions.

_x000D_

.myCheckbox input {_x000D_
  position: relative;_x000D_
  z-index: -9999;_x000D_
}_x000D_
_x000D_
.myCheckbox span {_x000D_
  width: 20px;_x000D_
  height: 20px;_x000D_
  display: block;_x000D_
  background: url("link_to_image");_x000D_
}_x000D_
_x000D_
.myCheckbox input:checked + span {_x000D_
  background: url("link_to_another_image");_x000D_
}

_x000D_

<label for="test">Label for my styled "checkbox"</label>_x000D_
<label class="myCheckbox">_x000D_
  <input type="checkbox" name="test" />_x000D_
  <span></span>_x000D_
</label>

_x000D_

User · Answer

My solution   x000D   x000D  input type  checkbox     x000D    cursor  pointer  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    outline  0  x000D    background  lightgray  x000D    height  16px  x000D    width  16px  x000D    border  1px solid white  x000D    x000D   x000D  input type  checkbox   checked   x000D    background   2aa1c0  x000D    x000D   x000D  input type  checkbox   hover   x000D    filter  brightness 90    x000D    x000D   x000D  input type  checkbox   disabled   x000D    background   e6e6e6  x000D    opacity  0 6  x000D    pointer-events  none  x000D    x000D   x000D  input type  checkbox   after   x000D    content      x000D    position  relative  x000D    left  40   x000D    top  20   x000D    width  15   x000D    height  40   x000D    border  solid  fff  x000D    border-width  0 2px 2px 0  x000D    transform  rotate 45deg   x000D    display  none  x000D    x000D   x000D  input type  checkbox   checked after   x000D    display  block  x000D    x000D   x000D  input type  checkbox   disabled after   x000D    border-color   7b7b7b  x000D    x000D   lt input type  checkbox  gt  lt br gt  x000D   lt input type  checkbox  checked gt  lt br gt  x000D   lt input type  checkbox  disabled gt  lt br gt  x000D   lt input type  checkbox  disabled checked gt  lt br gt  x000D   x000D   x000D

User · Answer

Here is an example  with theme support  It is a modern approach with CSS transitions  There is absolutely no JavaScript required   I derived the following code linked in this comment  on a related question   Edit  I added radio buttons  as maxshuty suggests    x000D   x000D  const selector     grid-container  gt   grid-row  gt   grid-col data-theme  retro     x000D  const main        gt    x000D    new CheckboxStyler   run selector   x000D    new RadioStyler   run selector   x000D     x000D   x000D     x000D     This is only used to add the wrapper class and checkmark span to an existing DOM  x000D     to make this CSS work  x000D      x000D  class AbstractInputStyler   x000D    constructor options    x000D      this opts   options  x000D      x000D    run parentSelector    x000D      let wrapperClass   this opts wrapperClass  x000D      let parent   document querySelector parentSelector     document getElementsByTagName  body   0   x000D      let labels   parent querySelectorAll  label    x000D      if  labels length  labels forEach label   gt    x000D        if  label querySelector  input type    this opts  inputType         x000D          if   label classList contains wrapperClass     x000D            label classList add wrapperClass   x000D            label appendChild this   createDefaultNode     x000D            x000D          x000D          x000D      return this  x000D      x000D        protected    x000D      createDefaultNode     x000D      let checkmark   document createElement  span    x000D      checkmark className   this opts  activeClass  x000D      return checkmark  x000D      x000D    x000D   x000D  class CheckboxStyler extends AbstractInputStyler   x000D    constructor options    x000D      super Object assign   x000D         inputType   checkbox   x000D         activeClass   checkmark  x000D         CheckboxStyler defaultOptions  options    x000D      x000D    x000D  CheckboxStyler defaultOptions     x000D    wrapperClass   checkbox-wrapper  x000D     x000D   x000D  class RadioStyler extends AbstractInputStyler   x000D    constructor options    x000D      super Object assign   x000D         inputType   radio   x000D         activeClass   pip  x000D         RadioStyler defaultOptions  options    x000D      x000D    x000D  RadioStyler defaultOptions     x000D    wrapperClass   radio-wrapper  x000D     x000D   x000D  main    x000D     Theming    x000D   x000D   root   x000D    --background-color   FFF  x000D    --font-color   000  x000D    --checkbox-default-background   EEE  x000D    --checkbox-hover-background   CCC  x000D    --checkbox-disabled-background   AAA  x000D    --checkbox-selected-background   1A74BA  x000D    --checkbox-selected-disabled-background   6694B7  x000D    --checkbox-checkmark-color   FFF  x000D    --checkbox-checkmark-disabled-color   DDD  x000D    x000D   x000D   data-theme  dark     x000D    --background-color   111  x000D    --font-color   EEE  x000D    --checkbox-default-background   222  x000D    --checkbox-hover-background   444  x000D    --checkbox-disabled-background   555  x000D    --checkbox-selected-background   2196F3  x000D    --checkbox-selected-disabled-background   125487  x000D    --checkbox-checkmark-color   EEE  x000D    --checkbox-checkmark-disabled-color   999  x000D    x000D   x000D   data-theme  retro     x000D    --background-color   FFA  x000D    --font-color   000  x000D    --checkbox-default-background   EEE  x000D    --checkbox-hover-background   FFF  x000D    --checkbox-disabled-background   BBB  x000D    --checkbox-selected-background   EEE  x000D    --checkbox-selected-disabled-background   BBB  x000D    --checkbox-checkmark-color   F44  x000D    --checkbox-checkmark-disabled-color   D00  x000D    x000D   x000D   x000D     General styles    x000D   x000D  html   x000D    width  100   x000D    height  100   x000D    x000D   x000D  body   x000D      background  var --background-color   -- For demo  moved to column     x000D      color       var --font-color         -- For demo  moved to column     x000D    background   777  x000D    width  calc 100  - 0 5em   x000D    height  calc 100  - 0 5em   x000D    padding  0 25em  x000D    x000D   x000D  h1   x000D    font-size  1 33em  important  x000D    x000D   x000D  h2   x000D    font-size  1 15em  important  x000D    margin-top  1em  x000D    x000D   x000D   x000D     Grid style - using flex    x000D   x000D   grid-container   x000D    display  flex  x000D    height  100   x000D    flex-direction  column  x000D    flex  1  x000D    x000D   x000D   grid-row   x000D    display  flex  x000D    flex-direction  row  x000D    flex  1  x000D    margin  0 25em 0  x000D    x000D   x000D   grid-col   x000D    display  flex  x000D    flex-direction  column  x000D    height  100   x000D    padding  0 1em  x000D    flex  1  x000D    margin  0 0 25em  x000D       If not demo  remove and uncomment the body color rules    x000D    background  var --background-color   x000D    color  var --font-color   x000D    x000D   x000D   grid-cell   x000D    width  100   x000D    height  100   x000D    x000D   x000D   x000D     The checkbox wrapper    x000D   x000D   checkbox-wrapper  x000D   radio-wrapper   x000D    display  block  x000D    position  relative  x000D    padding-left  1 5em  x000D    margin-bottom  0 5em  x000D    cursor  pointer  x000D    -webkit-user-select  none  x000D    -moz-user-select  none  x000D    -ms-user-select  none  x000D    user-select  none  x000D    x000D   x000D   x000D     Hide the browser s default checkbox and radio buttons    x000D   x000D   checkbox-wrapper input type  checkbox     x000D    position  absolute  x000D    opacity  0  x000D    cursor  pointer  x000D    height  0  x000D    width  0  x000D    x000D   x000D   radio-wrapper input type  radio     x000D    position  absolute  x000D    opacity  0  x000D    cursor  pointer  x000D    height  0  x000D    width  0  x000D    x000D   x000D   x000D     Create a custom checkbox    x000D   x000D   checkbox-wrapper  checkmark   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  1em  x000D    width  1em  x000D    background-color  var --checkbox-default-background   x000D    transition  all 0 2s ease-in  x000D    x000D   x000D   radio-wrapper  pip   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  1em  x000D    width  1em  x000D    border-radius  50   x000D    background-color  var --checkbox-default-background   x000D    transition  all 0 2s ease-in  x000D    x000D   x000D   x000D     Disabled style    x000D   x000D   checkbox-wrapper input type  checkbox   disabled  checkmark  x000D   radio-wrapper input type  radio   disabled  pip   x000D    cursor  not-allowed  x000D    background-color  var --checkbox-disabled-background   x000D    color  var --checkbox-checkmark-disabled-color   x000D    x000D   x000D   checkbox-wrapper input type  checkbox   disabled  checkmark after  x000D   radio-wrapper input type  radio   disabled  pip after   x000D    color  var --checkbox-checkmark-disabled-color   x000D    x000D   x000D   checkbox-wrapper input type  checkbox   disabled checked  checkmark  x000D   radio-wrapper input type  radio   disabled checked  pip   x000D    background-color  var --checkbox-selected-disabled-background   x000D    x000D   x000D   x000D     On mouse-over  add a grey background color    x000D   x000D   checkbox-wrapper hover input type  checkbox   not  disabled  not  checked   checkmark  x000D   radio-wrapper hover input type  radio   not  disabled  not  checked   pip   x000D    background-color  var --checkbox-hover-background   x000D    x000D   x000D   x000D     When the checkbox is checked  add a blue background    x000D   x000D   checkbox-wrapper input type  checkbox   checked  checkmark  x000D   radio-wrapper input type  radio   checked  pip   x000D    background-color  var --checkbox-selected-background   x000D    x000D   x000D   x000D     Create the checkmark indicator  hidden when not checked     x000D   x000D   checkbox-wrapper  checkmark after   x000D    display  none  x000D    width  100   x000D    position  absolute  x000D    text-align  center  x000D    content    2713   x000D    color  var --checkbox-checkmark-color   x000D    line-height  1 1em  x000D    x000D   x000D   radio-wrapper  pip after   x000D    display  none  x000D    width  100   x000D    position  absolute  x000D    text-align  center  x000D    content    2022   x000D    color  var --checkbox-checkmark-color   x000D    font-size  1 5em  x000D    top  -0 2em  x000D    x000D   x000D   x000D     Show the checkmark when checked    x000D   x000D   checkbox-wrapper input type  checkbox   checked  checkmark after   x000D    display  block  x000D    line-height  1 1em  x000D    x000D   x000D   radio-wrapper input type  radio   checked  pip after   x000D    display  block  x000D    line-height  1 1em  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs normalize 8 0 1 normalize min css  rel  stylesheet    gt  x000D   lt div class  grid-container  gt  x000D     lt div class  grid-row  gt  x000D       lt div class  grid-col  gt  x000D         lt div class  grid-cell  gt  x000D           lt h1 gt Pure CSS lt  h1 gt  x000D           lt h2 gt Checkbox lt  h2 gt  x000D           lt label class  checkbox-wrapper  gt One x000D             lt input type  checkbox  checked  checked  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Two x000D             lt input type  checkbox  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Three x000D             lt input type  checkbox  checked disabled gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Four x000D             lt input type  checkbox  disabled gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt h2 gt Radio lt  h2 gt  x000D           lt label class  radio-wrapper  gt One x000D             lt input type  radio  name  group-x  gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Two x000D             lt input type  radio  name  group-x  gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Three x000D             lt input type  radio  name  group-x  checked disabled gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Four x000D             lt input type  radio  name  group-x  disabled gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  grid-col  data-theme  dark  gt  x000D         lt div class  grid-cell  gt  x000D           lt h1 gt Pure CSS lt  h1 gt  x000D           lt h2 gt Checkbox lt  h2 gt  x000D           lt label class  checkbox-wrapper  gt One x000D             lt input type  checkbox  checked  checked  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Two x000D             lt input type  checkbox  gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Three x000D             lt input type  checkbox  checked disabled gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  checkbox-wrapper  gt Four x000D             lt input type  checkbox  disabled gt  x000D             lt span class  checkmark  gt  lt  span gt  x000D           lt  label gt  x000D           lt h2 gt Radio lt  h2 gt  x000D           lt label class  radio-wrapper  gt One x000D             lt input type  radio  name  group-y  gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Two x000D             lt input type  radio  name  group-y  gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Three x000D             lt input type  radio  name  group-y  checked disabled gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D           lt label class  radio-wrapper  gt Four x000D             lt input type  radio  name  group-y  disabled gt  x000D             lt span class  pip  gt  lt  span gt  x000D           lt  label gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  grid-col  data-theme  retro  gt  x000D         lt div class  grid-cell  gt  x000D           lt h1 gt JS   CSS lt  h1 gt  x000D           lt h2 gt Checkbox lt  h2 gt  x000D           lt label gt One    lt input type  checkbox  checked  checked  gt  lt  label gt  x000D           lt label gt Two    lt input type  checkbox  gt  lt  label gt  x000D           lt label gt Three  lt input type  checkbox  checked disabled gt  lt  label gt  x000D           lt label gt Four   lt input type  checkbox  disabled gt  lt  label gt  x000D           lt h2 gt Radio lt  h2 gt  x000D           lt label gt One    lt input type  radio  name  group-z  checked  checked  gt  lt  label gt  x000D           lt label gt Two    lt input type  radio  name  group-z  gt  lt  label gt  x000D           lt label gt Three  lt input type  radio  name  group-z  checked disabled gt  lt  label gt  x000D           lt label gt Four   lt input type  radio  name  group-z  disabled gt  lt  label gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Yikes  All these workarounds have led me to the conclusion that the HTML checkbox kind of sucks if you want to style it   As a forewarning  this isn t a CSS implementation  I just thought I d share the workaround I came up with in case anyone else might find it useful     I used the HTML5 canvas element   The upside to this is that you don t have to use external images and can probably save some bandwidth   The downside is that if a browser for some reason can t render it correctly  then there s no fallback  Though whether this remains an issue in 2017 is debatable   Update  I found the old code quite ugly  so I decided to give it a rewrite   Object prototype create   function args       var retobj   Object create this        retobj constructor args    null        return retobj     var Checkbox   Object seal       width  0      height  0      state  0      document  null      parent  null      canvas  null      ctx  null                 args         name      default             desc                width     15                  width        height    15                  height        document  window document     explicit document reference        target    this document body  target element to insert checkbox into             constructor  function args           if args     null              args                this width   args width    15          this height   args height    15          this document   args document    window document          this parent   args target    this document body          this canvas   this document createElement  canvas            this ctx   this canvas getContext  2d             this canvas width   this width          this canvas height   this height          this canvas addEventListener  click   this ev click this   false           this parent appendChild this canvas           this draw                ev click  function self           return function unused               self state    self state              self draw                          draw rect  function color  offset           this ctx fillStyle   color          this ctx fillRect offset  offset                  this width - offset   2  this height - offset   2               draw  function            this draw rect   CCCCCC   0           this draw rect   FFFFFF   1            if this is checked                this draw rect   000000   2               is checked  function            return   this state              Here s a working demo   The new version uses prototypes and differential inheritance to create an efficient system for creating checkboxes  To create a checkbox   var my checkbox   Checkbox create      This will immediately add the checkbox to the DOM and hook up the events  To query whether a checkbox is checked   my checkbox is checked       True if checked  else false   Also important to note is that I got rid of the loop   Update 2  Something I neglected to mention in the last update is that using the canvas has more advantages than just making a checkbox that looks however you want it to look  You could also create multi-state checkboxes  if you wanted to   Object prototype create   function args       var retobj   Object create this        retobj constructor args    null        return retobj     Object prototype extend   function newobj       var oldobj   Object create this        for prop in newobj          oldobj prop    newobj prop        return Object seal oldobj      var Checkbox   Object seal       width  0      height  0      state  0      document  null      parent  null      canvas  null      ctx  null                 args         name      default             desc                width     15                  width        height    15                  height        document  window document     explicit document reference        target    this document body  target element to insert checkbox into             constructor  function args           if args     null              args                this width   args width    15          this height   args height    15          this document   args document    window document          this parent   args target    this document body          this canvas   this document createElement  canvas            this ctx   this canvas getContext  2d             this canvas width   this width          this canvas height   this height          this canvas addEventListener  click   this ev click this   false           this parent appendChild this canvas           this draw                ev click  function self           return function unused               self state    self state              self draw                          draw rect  function color  offsetx  offsety           this ctx fillStyle   color          this ctx fillRect offsetx  offsety                  this width - offsetx   2  this height - offsety   2               draw  function            this draw rect   CCCCCC   0  0           this draw rect   FFFFFF   1  1           this draw state                draw state  function            if this is checked                this draw rect   000000   2  2               is checked  function            return this state    1             var Checkbox3   Checkbox extend       ev click  function self           return function unused               self state    self state   1    3              self draw                          draw state  function            if this is checked                this draw rect   000000   2  2            if this is partial                this draw rect   000000   2   this height - 2    2               is partial  function            return this state    2              I modified slightly the Checkbox used in the last snippet so that it is more generic  making it possible to  extend  it with a checkbox that has 3 states  Here s a demo  As you can see  it already has more functionality than the built-in checkbox   Something to consider when you re choosing between JavaScript and CSS   Old  poorly-designed code  Working Demo  First  set up a canvas  var canvas   document createElement  canvas        ctx   canvas getContext  2d        checked   0     The state of the checkbox canvas width   canvas height   15     Set the width and height of the canvas document body appendChild canvas   document body appendChild document createTextNode   Togglable Option       Next  devise a way to have the canvas update itself    function loop         Draws a border   ctx fillStyle     ccc     ctx fillRect 0 0 15 15     ctx fillStyle     fff     ctx fillRect 1  1  13  13        Fills in canvas if checked   if checked       ctx fillStyle     000       ctx fillRect 2  2  11  11         setTimeout loop  1000 10      Refresh 10 times per second         The last part is to make it interactive  Luckily  it s pretty simple   canvas onclick   function      checked    checked      This is where you might have problems in IE  due to their weird event handling model in JavaScript     I hope this helps someone  it definitely suited my needs

User · Answer

Before you begin  as of Jan 2015   The original question and answer are now  5 years old  As such  this is a little bit of an update   Firstly  there are a number of approaches when it comes to styling checkboxes  the basic tenet is    You will need to hide the default checkbox control which is styled by your browser  and cannot be overridden in any meaningful way using CSS  With the control hidden  you will still need to be able to detect and toggle its checked state The checked state of the checkbox will need to be reflected by styling a new element   The solution  in principle   The above can be accomplished by a number of means - and you will often hear using CSS3 pseudo-elements is the right way  Actually  there is no real right or wrong way  it depends on the approach most suitable for the context you will be using it in  That said  I have a preferred one    Wrap your checkbox in a label element  This will mean that even when it is hidden  you can still toggle its checked state on clicking anywhere within the label  Hide your checkbox Add a new element after the checkbox which you will style accordingly  It must appear after the checkbox so it can be selected using CSS and styled dependent on the  checked state  CSS cannot select  backwards     The solution  in code    x000D   x000D  label input   x000D    visibility  hidden     lt -- Hide the default checkbox  The rest is to hide and allow tabbing  which display none prevents    x000D    display  block  x000D    height  0  x000D    width  0  x000D    position  absolute  x000D    overflow  hidden  x000D    x000D  label span      lt -- Style the artificial checkbox    x000D    height  10px  x000D    width  10px  x000D    border  1px solid grey  x000D    display  inline-block  x000D    x000D   type checkbox  checked   span      lt -- Style its checked state    x000D    background  black  x000D    x000D   lt label gt  x000D     lt input type  checkbox  gt  x000D     lt span gt  lt  span gt  x000D    Checkbox label text x000D   lt  label gt  x000D   x000D   x000D    Refinement  using icons   But hey  I hear you shout  What about if I want to show a nice little tick or cross in the box  And I don t want to use background images   Well  this is where CSS3 s pseudo-elements can come into play  These support the content property which allows you to inject Unicode icons representing either state  Alternatively  you could use a third party font icon source such as font awesome  though make sure you also set the relevant font-family  e g  to FontAwesome    x000D   x000D  label input   x000D    display  none     Hide the default checkbox    x000D    x000D   x000D     Style the artificial checkbox    x000D  label span   x000D    height  10px  x000D    width  10px  x000D    border  1px solid grey  x000D    display  inline-block  x000D    position  relative  x000D    x000D   x000D     Style its checked state   with a ticked icon    x000D   type checkbox  checked   span before   x000D    content    2714   x000D    position  absolute  x000D    top  -5px  x000D    left  0  x000D    x000D   lt label gt  x000D     lt input type  checkbox  gt  x000D     lt span gt  lt  span gt  x000D    Checkbox label text x000D   lt  label gt  x000D   x000D   x000D

User · Answer

Here is a CSS HTML-only version  no jQuery or JavaScript needed at all  Simple and clean HTML and really simple and short CSS   Here is the JSFiddle  http   jsfiddle net v71kn3pr   Here is the HTML    lt div id  myContainer  gt       lt input type  checkbox  name  myCheckbox  id  myCheckbox 01 item  value  red    gt       lt label for  myCheckbox 01 item  class  box  gt  lt  label gt       lt label for  myCheckbox 01 item  class  text  gt I accept the Terms of Use  lt  label gt   lt  div gt    Here is the CSS   myContainer       outline  black dashed 1px      width  200px     myContainer input type  checkbox   name  myCheckbox         display  none     myContainer input type  checkbox   name  myCheckbox   not  checked    label box       display  inline-block      width  25px      height  25px      border  black solid 1px      background   FFF       margin  5px 5px     myContainer input type  checkbox   name  myCheckbox   checked   label box       display  inline-block      width  25px      height  25px      border  black solid 1px      background   F00      margin  5px 5px     myContainer input type  checkbox   name  myCheckbox     label   label text       font  normal 12px arial      display  inline-block      line-height  27px      vertical-align  top      margin  5px 0px      This can be adapted to be able to have individual radio or checkboxes  grooups of checkboxes and groups of radio buttons as well   This html css  will allow you to also capture click on the label  so the checkbox will be checked and unchecked even if you click just on the label   This type of checkbox radio button works perfectly with any form  no problem at all  Have been tested using PHP  ASP NET   aspx   JavaServer Faces  and ColdFusion too

User · Answer

A simple and lightweight template as well:

_x000D_

input[type=checkbox] {_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
input[type=checkbox]:checked:before {_x000D_
  content: "\2713";_x000D_
  background: #fffed5;_x000D_
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);_x000D_
  font-size: 20px;_x000D_
  text-align: center;_x000D_
  line-height: 8px;_x000D_
  display: inline-block;_x000D_
  width: 13px;_x000D_
  height: 15px;_x000D_
  color: #00904f;_x000D_
  border: 1px solid #cdcdcd;_x000D_
  border-radius: 4px;_x000D_
  margin: -3px -3px;_x000D_
  text-indent: 1px;_x000D_
}_x000D_
_x000D_
input[type=checkbox]:before {_x000D_
  content: "\202A";_x000D_
  background: #ffffff;_x000D_
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);_x000D_
  font-size: 20px;_x000D_
  text-align: center;_x000D_
  line-height: 8px;_x000D_
  display: inline-block;_x000D_
  width: 13px;_x000D_
  height: 15px;_x000D_
  color: #00904f;_x000D_
  border: 1px solid #cdcdcd;_x000D_
  border-radius: 4px;_x000D_
  margin: -3px -3px;_x000D_
  text-indent: 1px;_x000D_
}

_x000D_

<input type="checkbox" checked="checked">checked1<br>_x000D_
<input type="checkbox">unchecked2<br>_x000D_
<input type="checkbox" checked="checked" id="id1">_x000D_
<label for="id1">checked2+label</label><br>_x000D_
<label for="id2">unchecked2+label+rtl</label>_x000D_
<input type="checkbox" id="id2">_x000D_
<br>

_x000D_

https://jsfiddle.net/rvgccn5b/

User · Answer

You can style checkboxes with a little trickery using the label element an example is below:

_x000D_

.checkbox > input[type=checkbox] {_x000D_
  visibility: hidden;_x000D_
}_x000D_
_x000D_
.checkbox {_x000D_
  position: relative;_x000D_
  display: block;_x000D_
  width: 80px;_x000D_
  height: 26px;_x000D_
  margin: 0 auto;_x000D_
  background: #FFF;_x000D_
  border: 1px solid #2E2E2E;_x000D_
  border-radius: 2px;_x000D_
  -webkit-border-radius: 2px;_x000D_
  -moz-border-radius: 2px;_x000D_
}_x000D_
_x000D_
.checkbox:after {_x000D_
  position: absolute;_x000D_
  display: inline;_x000D_
  right: 10px;_x000D_
  content: 'no';_x000D_
  color: #E53935;_x000D_
  font: 12px/26px Arial, sans-serif;_x000D_
  font-weight: bold;_x000D_
  text-transform: capitalize;_x000D_
  z-index: 0;_x000D_
}_x000D_
_x000D_
.checkbox:before {_x000D_
  position: absolute;_x000D_
  display: inline;_x000D_
  left: 10px;_x000D_
  content: 'yes';_x000D_
  color: #43A047;_x000D_
  font: 12px/26px Arial, sans-serif;_x000D_
  font-weight: bold;_x000D_
  text-transform: capitalize;_x000D_
  z-index: 0;_x000D_
}_x000D_
_x000D_
.checkbox label {_x000D_
  position: absolute;_x000D_
  display: block;_x000D_
  top: 3px;_x000D_
  left: 3px;_x000D_
  width: 34px;_x000D_
  height: 20px;_x000D_
  background: #2E2E2E;_x000D_
  cursor: pointer;_x000D_
  transition: all 0.5s linear;_x000D_
  -webkit-transition: all 0.5s linear;_x000D_
  -moz-transition: all 0.5s linear;_x000D_
  border-radius: 2px;_x000D_
  -webkit-border-radius: 2px;_x000D_
  -moz-border-radius: 2px;_x000D_
  z-index: 1;_x000D_
}_x000D_
_x000D_
.checkbox input[type=checkbox]:checked + label {_x000D_
  left: 43px;_x000D_
}

_x000D_

<div class="checkbox">_x000D_
  <input id="checkbox1" type="checkbox" value="1" />_x000D_
  <label for="checkbox1"></label>_x000D_
</div>

_x000D_

And a FIDDLE for the above code. Note that some CSS doesn't work in older versions of browsers, but I'm sure there are some fancy JavaScript examples out there!

User · Answer

You can use iCheck  It is customized checkboxes and radio buttons for jQuery  amp  Zepto  and maybe it will help you   Make sure jQuery v1 7  is loaded before the icheck js   Choose a color scheme  there are 10 different styles available    Black     minimal css Red     red css Green     green css Blue     blue css Aero     aero css Grey     grey css Orange     orange css Yellow     yellow css Pink     pink css Purple     purple css  Copy  skins minimal  folder and icheck js file to your site  Insert before  in your HTML  replace your-path and color-scheme     lt link href  your-path minimal color-scheme css  rel  stylesheet  gt   lt script src  your-path icheck js  gt  lt  script gt    Example for a Red color scheme    lt link href  your-path minimal red css  rel  stylesheet  gt   lt script src  your-path icheck js  gt  lt  script gt   Add some checkboxes and radio buttons to your HTML    lt input type  checkbox  gt   lt input type  checkbox  checked gt   lt input type  radio  name  iCheck  gt   lt input type  radio  name  iCheck  checked gt   Add JavaScript to your HTML to launch iCheck plugin    lt script gt        document  ready function             input   iCheck           checkboxClass   icheckbox minimal           radioClass   iradio minimal           increaseArea   20      Optional                   lt  script gt   For different from black color schemes use this code  example for Red     lt script gt        document  ready function             input   iCheck           checkboxClass   icheckbox minimal-red           radioClass   iradio minimal-red           increaseArea   20      Optional                   lt  script gt   Done

User · Answer

It seems you can change the colour of the checkbox in grayscale by using CSS only.

The following converts the checkboxes from black to gray (which was about what I wanted):

input[type="checkbox"] {
    opacity: .5;
}

User · Answer

No  you still can t style the checkbox itself  but I  finally  figured out how to style an illusion while keeping the functionality of clicking a checkbox  It means that you can toggle it even if the cursor isn t perfectly still without risking selecting text or triggering drag-and-drop   This solution probably also fits radio buttons   The following works in Internet nbsp Explorer nbsp 9  Firefox 30 0 and Chrome 40 0 2214 91 and is just a basic example  You can still use it in combination with background images and pseudo-elements   http   jsfiddle net o0xo13yL 1   label       display  inline-block      position  relative     Needed for checkbox absolute positioning        background-color   eee      padding   5rem      border  1px solid  000      border-radius   375rem      font-family   Courier New       font-size  1rem      line-height  1rem     label  gt  input type  checkbox         display  block      position  absolute     Remove it from the flow        width  100       height  100       margin  - 5rem     Negative the padding of label to cover the  button         cursor  pointer      opacity  0     Make it transparent        z-index  666     Place it on top of everything else       label  gt  input type  checkbox     span       display  inline-block      width  1rem      height  1rem      border  1px solid  000      margin-right   5rem     label  gt  input type  checkbox   checked   span       background-color   666      lt label gt       lt input type  checkbox    gt       lt span gt  amp nbsp  lt  span gt Label text  lt  label gt

User · Answer

I prefer to use icon fonts  such as FontAwesome  since it s easy to modify their colours with CSS  and they scale really well on high pixel-density devices  So here s another pure CSS variant  using similar techniques to those above    Below is a static image so you can visualize the result  see the JSFiddle for an interactive version      As with other solutions  it uses the label element  An adjacent span holds our checkbox character    x000D   x000D  span bigcheck-target   x000D    font-family  FontAwesome     Use an icon font for the checkbox    x000D    x000D   x000D  input type  checkbox   bigcheck   x000D    position  relative  x000D    left  -999em     Hide the real checkbox    x000D    x000D   x000D  input type  checkbox   bigcheck   span bigcheck-target after   x000D    content    f096      In fontawesome  is an open square  fa-square-o     x000D    x000D   x000D  input type  checkbox   bigcheck checked   span bigcheck-target after   x000D    content    f046      fontawesome checked box  fa-check-square-o     x000D    x000D   x000D          Optional - colors and padding to make it look nice        x000D  body   x000D    background-color   2C3E50  x000D    color   D35400  x000D    font-family  sans-serif  x000D    font-weight  500  x000D    font-size  4em     Set this to whatever size you want    x000D    x000D   x000D  span bigcheck   x000D    display  block  x000D    padding  0 5em  x000D    x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css    gt  x000D   x000D   lt span class  bigcheck  gt  x000D     lt label class  bigcheck  gt  x000D      Cheese x000D       lt input type  checkbox  class  bigcheck  name  cheese  value  yes    gt  x000D       lt span class  bigcheck-target  gt  lt  span gt  x000D     lt  label gt  x000D   lt  span gt  x000D   x000D   x000D    Here s the JSFiddle for it

User · Answer

No JavaScript or jQuery required    Change your checkbox style simple way    x000D   x000D  input type  checkbox     x000D    display  none  x000D    border  none  important  x000D    box-shadow  none  important  x000D    x000D   x000D  input type  checkbox     label span   x000D    background  url http   imgh us uncheck png   x000D    width  49px  x000D    height  49px  x000D    display  inline-block  x000D    vertical-align  middle  x000D    x000D   x000D  input type  checkbox   checked   label span   x000D    background  url http   imgh us check 2 png   x000D    width  49px  x000D    height  49px  x000D    vertical-align  middle  x000D    x000D   lt input type  checkbox  id  option    gt  x000D   lt label for  option  gt   lt span gt  lt  span gt  Click me  lt  label gt  x000D   x000D   x000D    Here is JsFiddle link

User · Answer

I think the easiest way to do it is by styling a label and making the checkbox invisible.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

The checkbox, even though it is hidden, will still be accessible, and its value will be sent when a form is submitted. For old browsers you might have to change the class of the label to checked using JavaScript because I don't think old versions of Internet Explorer understand ::checked on the checkbox.

User · Answer

Modify checkbox style with plain CSS3  don t required any JS amp HTML manipulation      x000D   x000D   form input type  checkbox   before   x000D    display  inline-block  x000D    font  normal normal normal 14px 1 FontAwesome  x000D    font-size  inherit  x000D    text-rendering  auto  x000D    -webkit-font-smoothing  antialiased  x000D    content    f096   x000D    opacity  1  important  x000D    margin-top  -25px  x000D    appearance  none  x000D    background   fff  x000D    x000D   x000D   form input type  checkbox   checked before   x000D    content    f046   x000D    x000D   x000D   form input type  checkbox     x000D    font-size  22px  x000D    appearance  none  x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet    gt  x000D   x000D   lt form class  form  gt  x000D     lt input type  checkbox    gt  x000D   lt  form gt  x000D   x000D   x000D

[html] How to style a checkbox using CSS

The answer is

Do not hide it using `visibility: hidden` or `display: none`

Test it on JS Fiddle

SCSS / SASS Implementation

A more modern approach

Simple to implement and easily customizable solution

2021 solution - accessible pure CSS checkboxes and radio buttons with no external dependencies

My solution

Update

Update 2

Old, poorly-designed code

Before you begin (as of Jan 2015)

The solution (in principle)

The solution (in code)

Refinement (using icons)

Examples related to html

Examples related to css

Examples related to checkbox

Tags

[html] How to style a checkbox using CSS

The answer is

Do not hide it using visibility: hidden or display: none

Test it on JS Fiddle

SCSS / SASS Implementation

A more modern approach

Simple to implement and easily customizable solution

2021 solution - accessible pure CSS checkboxes and radio buttons with no external dependencies

My solution

Update

Update 2

Old, poorly-designed code

Before you begin (as of Jan 2015)

The solution (in principle)

The solution (in code)

Refinement (using icons)

Examples related to html

Examples related to css

Examples related to checkbox

Tags

Do not hide it using `visibility: hidden` or `display: none`