How to style a checkbox using CSS

Question

I am trying to style a checkbox using the following    x000D   x000D   lt input type  checkbox  style  border 2px dotted  00f display block background  ff0000     gt  x000D   x000D   x000D    But the style is not applied  The checkbox still displays its default style  How do I give it the specified style

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

I think the easiest way to do it is by styling a label and making the checkbox invisible   HTML   lt input type  checkbox  id  first    gt   lt label for  first  gt  amp nbsp  lt  label gt    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 nbsp Explorer  understand   checked on the checkbox

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

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

You can style checkboxes with a little trickery using the label element an example is below    x000D   x000D   checkbox  gt  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   lt div class  checkbox  gt  x000D     lt input id  checkbox1  type  checkbox  value  1    gt  x000D     lt label for  checkbox1  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   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

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

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

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

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

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

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

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

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

A simple and lightweight template as well    x000D   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   lt input type  checkbox  checked  checked  gt checked1 lt br gt  x000D   lt input type  checkbox  gt unchecked2 lt br gt  x000D   lt input type  checkbox  checked  checked  id  id1  gt  x000D   lt label for  id1  gt checked2 label lt  label gt  lt br gt  x000D   lt label for  id2  gt unchecked2 label rtl lt  label gt  x000D   lt input type  checkbox  id  id2  gt  x000D   lt br gt  x000D   x000D   x000D    https   jsfiddle net rvgccn5b

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

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    lt div class  custom-checkbox  gt       lt input type  checkbox    gt       lt label gt           lt span gt  lt  span gt          Checkbox label      lt  label gt   lt  div gt    Apply this style for the checkbox to change the color label   lt style gt       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         lt  style gt

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

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

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   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   lt input type  checkbox  id  checkbox1    gt   lt label for  checkbox1  gt Checkbox lt  label gt  x000D   x000D   x000D

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

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

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

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

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

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   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   lt h1 gt    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  lt  h1 gt    lt p gt You can easily change the background color  checkbox symbol  border-radius  etc  lt  p gt    lt label gt     lt input type  checkbox  gt     lt span gt Try using tab and space lt  span gt   lt  label gt    lt br gt    lt label gt     lt input type  checkbox  checked disabled gt     lt span gt Disabled Checked Checkbox lt  span gt   lt  label gt    lt br gt    lt label gt     lt input type  checkbox  disabled gt     lt span gt Disabled Checkbox lt  span gt   lt  label gt   lt br gt    lt label gt     lt input type  checkbox  gt     lt span gt Normal Checkbox lt  span gt   lt  label gt    lt br gt    lt label gt     lt input type  checkbox  gt     lt span gt Another Normal Checkbox lt  span gt   lt  label gt  x000D   x000D   x000D

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    lt label class  check-box  gt     lt input type  checkbox  gt     lt span gt Check box Text lt  span gt   lt  label gt

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

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

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

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 nbsp Explorer nbsp 8 and lower versions    x000D   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   lt label for  test  gt Label for my styled  checkbox  lt  label gt  x000D   lt label class  myCheckbox  gt  x000D     lt input type  checkbox  name  test    gt  x000D     lt span gt  lt  span gt  x000D   lt  label gt  x000D   x000D   x000D

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

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

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 nbsp 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   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   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt table style  width 100   gt  x000D     lt tr gt  x000D       lt td gt Normal  lt  td gt  x000D       lt td gt  lt input type  checkbox    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  checked  checked    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  checked  checked    gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Small  lt  td gt  x000D       lt td gt  lt input type  checkbox  class  myinput    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  checked  checked  class  myinput    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  class  myinput    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  checked  checked  class  myinput    gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Large  lt  td gt  x000D       lt td gt  lt input type  checkbox  class  myinput large    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  checked  checked  class  myinput large    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  class  myinput large    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  checked  checked  class  myinput large    gt  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Custom icon  lt  td gt  x000D       lt td gt  lt input type  checkbox  class  myinput large custom    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  checked  checked  class  myinput large custom    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  class  myinput large custom    gt  lt  td gt  x000D       lt td gt  lt input type  checkbox  disabled  disabled  checked  checked  class  myinput large custom    gt  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Bonus Webkit style flipswitch fiddle   x000D   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   lt script src  https   ajax googleapis com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt  x000D   x000D   lt h2 gt Webkit friendly mobile-style checkbox flipswitch lt  h2 gt  x000D   lt input type  checkbox  class  flipswitch    gt   amp nbsp  x000D   lt span gt  lt  span gt  x000D   lt br gt  x000D   lt input type  checkbox  checked  checked  class  flipswitch    gt   amp nbsp  x000D   lt span gt  lt  span gt  x000D   x000D   x000D

[html] How to style a checkbox using CSS

Examples related to html

Examples related to css

Examples related to checkbox