Why cannot change checkbox color whatever I do

Question

I try to style checkbox background color  but it won t change whatever I do  I am using firefox 29 latest   Is there some rule changes in css or may be in the browser   CSS   input type  checkbox         background   990000          chk      background-color   990000         Here is a demo http   jsfiddle net 6KXRg

User · Answer

Technically  it is possible to change the color of anything with CSS  As mentioned  you can t change the background-color or color but you can use CSS filters  For example   input type  checkbox        change  blue  browser chrome to yellow      filter  invert 100   hue-rotate 18deg  brightness 1 7       If you are really looking for design control over checkboxes though  your best bet is to do the  hidden  checkbox and style an adjacent element such as a div

User · Answer

I also had this problem  I use chrome to code because I m currently a newbie  I was able to change the colour of the checkboxes and radio selectors when they were checked ONLY using CSS  The current degree that is set in the hue-rotate   turns the blue checks red  I  first used the grayscale 1  with the filter  but you don t need it  However  if you just want plain flat gray  go for the grayscale value for filter  I ve ONLY tested this in Chrome but it works with just plain old HTML and CSS  let me know in the comments section if it works in other browsers   x000D   x000D  input type  checkbox    input type  radio       filter  hue-rotate 140deg       x000D   lt body gt     lt label for  radio1  gt Eau de Toilette lt  label gt     lt input type  radio  id  radio1  name  example1  gt  lt br gt     lt label for  radio2  gt Eau de Parfum lt  label gt     lt input type  radio  id  radio2  name  example1  gt  lt br gt     lt label for  check1  gt Orange Zest lt  label gt     lt input type  checkbox  id  check1  name  example2  gt  lt br gt     lt label for  check2  gt Lemons lt  label gt     lt input type  checkbox  id  check2  name  example2  gt  lt br gt    lt  body gt  x000D   x000D   x000D

User · Answer

Late but as a note  after upgrading Chrome to v 81  all check boxes  amp  radio buttons turned blue  So here is a dead simple solution if you ain t okay with blue but with grayscale   input type  checkbox    input type  radio     filter  grayscale 1      See more on MDN   https   developer mozilla org en-US docs Web CSS filter  https   developer mozilla org en-US docs Web CSS filter-function grayscale

User · Answer

Checkboxes are not able to be styled   You would need a third party js plugin there are many available   If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox    The same problem will arise when trying to style that little down arrow on a drop-down select element

User · Answer

Agree with iLoveTux   applying too many things  many colors and backgrounds  nothing worked   but here s what started working  Apply these properties to its css   -webkit-appearance  none    -moz-appearance  none    -o-appearance  none    appearance none    and then css styling started working on checkbox

User · Answer

you cant change the background of checkbox but some how you can do a trick try this      x000D   x000D   divBox   x000D      width  20px  x000D      height  20px  x000D      background   ddd  x000D      margin  20px 90px  x000D      position  relative  x000D      -webkit-box-shadow  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  0px 1px 3px rgba 0 0 0 0 5   x000D    x000D   x000D   divBox label   x000D      display  block  x000D      width  20px  x000D      height  20px  x000D      -webkit-transition  all  5s ease  x000D      -moz-transition  all  5s ease  x000D      -o-transition  all  5s ease  x000D      -ms-transition  all  5s ease  x000D      transition  all  5s ease  x000D      cursor  pointer  x000D      position  absolute  x000D      top  1px  x000D      z-index  1  x000D          x000D      use this background transparent to check the value of checkbox  x000D      background  transparent  x000D         x000D      background  Black  x000D      -webkit-box-shadow inset 0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow inset 0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow inset 0px 1px 3px rgba 0 0 0 0 5   x000D    x000D   x000D   divBox input type checkbox  checked   label   x000D      background  green  x000D    x000D   lt div class  divBox  gt  x000D       lt input type  checkbox  value  1  id  checkboxFourInput name      gt  x000D       lt label for  checkboxFourInput  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

One line of CSS is enough using hue-rotate filter  You can change their sizes with transform  scale   as well   checkbox   filter  hue-rotate 0deg     Codepen  x000D   x000D   c1   filter  hue-rotate 0deg       c2   filter  hue-rotate 30deg      c3   filter  hue-rotate 60deg      c4   filter  hue-rotate 90deg      c5   filter  hue-rotate 120deg     c6   filter  hue-rotate 150deg     c7   filter  hue-rotate 180deg     c8   filter  hue-rotate 210deg     c9   filter  hue-rotate 240deg     input type checkbox      transform  scale 2     margin  10px    cursor  pointer        Prevent cursor being  text  between checkboxes    body   cursor  default   x000D   lt input type  checkbox  class  c1    gt   lt input type  checkbox  class  c2    gt   lt input type  checkbox  class  c3    gt   lt input type  checkbox  class  c4    gt   lt input type  checkbox  class  c5    gt   lt input type  checkbox  class  c6    gt   lt input type  checkbox  class  c7    gt   lt input type  checkbox  class  c8    gt   lt input type  checkbox  class  c9    gt  x000D   x000D   x000D

User · Answer

Transparency maybe  checkbox inside span   lt span style  display inline-block  background-color silver padding 0px margin 0px height 13px  width 13px  overflow hidden  gt  lt input type  checkbox  style  opacity 0 50 padding 0px margin 0px    gt  lt  span gt

User · Answer

I had the same issue  trying to use large inputs and had a very small checkbox  After some searching  this is good enough for my needs   input type  checkbox      width  30px  important    height  30px  important    margin  5px    -webkit-appearance  none    -moz-appearance  none    -o-appearance  none    appearance none    outline  2px solid lightblue    box-shadow  none    font-size  2em      JSFiddle  Maybe someone will find it useful

User · Answer

Although the question is answered and is older  In exploring some options to overcome the the styling of check boxes issue I encountered this awesome set of CSS3 only styling of check boxes and radio buttons controlling background colors and other appearances  Thought this might be right up the alley of this question   JSFiddle   x000D   x000D  body   x000D      background   555  x000D    x000D   x000D  h1   x000D      color   eee  x000D      font  30px Arial  sans-serif  x000D      -webkit-font-smoothing  antialiased  x000D      text-shadow  0px 1px black  x000D      text-align  center  x000D      margin-bottom  50px  x000D    x000D   x000D  input type checkbox    x000D      visibility  hidden  x000D    x000D   x000D     SLIDE ONE    x000D   slideOne   x000D      width  50px  x000D      height  10px  x000D      background   333  x000D      margin  20px auto  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      position  relative  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D    x000D   x000D   slideOne label   x000D      display  block  x000D      width  16px  x000D      height  16px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D   x000D      -webkit-transition  all  4s ease  x000D      -moz-transition  all  4s ease  x000D      -o-transition  all  4s ease  x000D      -ms-transition  all  4s ease  x000D      transition  all  4s ease  x000D      cursor  pointer  x000D      position  absolute  x000D      top  -3px  x000D      left  -3px  x000D   x000D      -webkit-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      -moz-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D    x000D   x000D   slideOne input type checkbox  checked   label   x000D      left  37px  x000D    x000D   x000D     SLIDE TWO    x000D   slideTwo   x000D      width  80px  x000D      height  30px  x000D      background   333  x000D      margin  20px auto  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      position  relative  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D    x000D   x000D   slideTwo after   x000D      content      x000D      position  absolute  x000D      top  14px  x000D      left  14px  x000D      height  2px  x000D      width  52px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      background   111  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D    x000D   x000D   slideTwo label   x000D      display  block  x000D      width  22px  x000D      height  22px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D   x000D      -webkit-transition  all  4s ease  x000D      -moz-transition  all  4s ease  x000D      -o-transition  all  4s ease  x000D      -ms-transition  all  4s ease  x000D      transition  all  4s ease  x000D      cursor  pointer  x000D      position  absolute  x000D      top  4px  x000D      z-index  1  x000D      left  4px  x000D   x000D      -webkit-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      -moz-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D    x000D   x000D   slideTwo label after   x000D      content      x000D      position  absolute  x000D      width  10px  x000D      height  10px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      background   333  x000D      left  6px  x000D      top  6px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 1   0px 1px 0px rgba 255 255 255 0 9   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 1   0px 1px 0px rgba 255 255 255 0 9   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 1   0px 1px 0px rgba 255 255 255 0 9   x000D    x000D   x000D   slideTwo input type checkbox  checked   label   x000D      left  54px  x000D    x000D   x000D   slideTwo input type checkbox  checked   label after   x000D      background   00bf00  x000D    x000D   x000D     SLIDE THREE    x000D   slideThree   x000D      width  80px  x000D      height  26px  x000D      background   333  x000D      margin  20px auto  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      position  relative  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 0 2   x000D    x000D   x000D   slideThree after   x000D      content   OFF   x000D      font  12px 26px Arial  sans-serif  x000D      color   000  x000D      position  absolute  x000D      right  10px  x000D      z-index  0  x000D      font-weight  bold  x000D      text-shadow  1px 1px 0px rgba 255 255 255  15   x000D    x000D   x000D   slideThree before   x000D      content   ON   x000D      font  12px 26px Arial  sans-serif  x000D      color   00bf00  x000D      position  absolute  x000D      left  10px  x000D      z-index  0  x000D      font-weight  bold  x000D    x000D   x000D   slideThree label   x000D      display  block  x000D      width  34px  x000D      height  20px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D   x000D      -webkit-transition  all  4s ease  x000D      -moz-transition  all  4s ease  x000D      -o-transition  all  4s ease  x000D      -ms-transition  all  4s ease  x000D      transition  all  4s ease  x000D      cursor  pointer  x000D      position  absolute  x000D      top  3px  x000D      left  3px  x000D      z-index  1  x000D   x000D      -webkit-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      -moz-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      box-shadow  0px 2px 5px 0px rgba 0 0 0 0 3   x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D    x000D   x000D   slideThree input type checkbox  checked   label   x000D      left  43px  x000D    x000D   x000D     ROUNDED ONE    x000D   roundedOne   x000D      width  28px  x000D      height  28px  x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D      margin  20px auto  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      position  relative  x000D    x000D   x000D   roundedOne label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      left  4px  x000D      top  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D   x000D      background  -webkit-linear-gradient top   222 0    45484d 100    x000D      background  -moz-linear-gradient top   222 0    45484d 100    x000D      background  -o-linear-gradient top   222 0    45484d 100    x000D      background  -ms-linear-gradient top   222 0    45484d 100    x000D      background  linear-gradient top   222 0    45484d 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   222   endColorstr   45484d  GradientType 0    x000D    x000D   x000D   roundedOne label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  16px  x000D      height  16px  x000D      background   00bf00  x000D   x000D      background  -webkit-linear-gradient top   00bf00 0    009400 100    x000D      background  -moz-linear-gradient top   00bf00 0    009400 100    x000D      background  -o-linear-gradient top   00bf00 0    009400 100    x000D      background  -ms-linear-gradient top   00bf00 0    009400 100    x000D      background  linear-gradient top   00bf00 0    009400 100    x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      top  2px  x000D      left  2px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D    x000D   x000D   roundedOne label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 3  x000D    x000D   x000D   roundedOne input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   x000D     ROUNDED TWO    x000D   roundedTwo   x000D      width  28px  x000D      height  28px  x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D      margin  20px auto  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      position  relative  x000D    x000D   x000D   roundedTwo label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D   x000D      -webkit-border-radius  50px  x000D      -moz-border-radius  50px  x000D      border-radius  50px  x000D      left  4px  x000D      top  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D   x000D      background  -webkit-linear-gradient top   222 0    45484d 100    x000D      background  -moz-linear-gradient top   222 0    45484d 100    x000D      background  -o-linear-gradient top   222 0    45484d 100    x000D      background  -ms-linear-gradient top   222 0    45484d 100    x000D      background  linear-gradient top   222 0    45484d 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   222   endColorstr   45484d  GradientType 0    x000D    x000D   x000D   roundedTwo label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  9px  x000D      height  5px  x000D      background  transparent  x000D      top  5px  x000D      left  4px  x000D      border  3px solid  fcfff4  x000D      border-top  none  x000D      border-right  none  x000D   x000D      -webkit-transform  rotate -45deg   x000D      -moz-transform  rotate -45deg   x000D      -o-transform  rotate -45deg   x000D      -ms-transform  rotate -45deg   x000D      transform  rotate -45deg   x000D    x000D   x000D   roundedTwo label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 3  x000D    x000D   x000D   roundedTwo input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   x000D     SQUARED ONE    x000D   squaredOne   x000D      width  28px  x000D      height  28px  x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D      margin  20px auto  x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      position  relative  x000D    x000D   x000D   squaredOne label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D      left  4px  x000D      top  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D   x000D      background  -webkit-linear-gradient top   222 0    45484d 100    x000D      background  -moz-linear-gradient top   222 0    45484d 100    x000D      background  -o-linear-gradient top   222 0    45484d 100    x000D      background  -ms-linear-gradient top   222 0    45484d 100    x000D      background  linear-gradient top   222 0    45484d 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   222   endColorstr   45484d  GradientType 0    x000D    x000D   x000D   squaredOne label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  16px  x000D      height  16px  x000D      background   00bf00  x000D   x000D      background  -webkit-linear-gradient top   00bf00 0    009400 100    x000D      background  -moz-linear-gradient top   00bf00 0    009400 100    x000D      background  -o-linear-gradient top   00bf00 0    009400 100    x000D      background  -ms-linear-gradient top   00bf00 0    009400 100    x000D      background  linear-gradient top   00bf00 0    009400 100    x000D   x000D      top  2px  x000D      left  2px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D    x000D   x000D   squaredOne label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 3  x000D    x000D   x000D   squaredOne input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   x000D     SQUARED TWO    x000D   squaredTwo   x000D      width  28px  x000D      height  28px  x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D      margin  20px auto  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      position  relative  x000D    x000D   x000D   squaredTwo label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D      left  4px  x000D      top  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255 1   x000D   x000D      background  -webkit-linear-gradient top   222 0    45484d 100    x000D      background  -moz-linear-gradient top   222 0    45484d 100    x000D      background  -o-linear-gradient top   222 0    45484d 100    x000D      background  -ms-linear-gradient top   222 0    45484d 100    x000D      background  linear-gradient top   222 0    45484d 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   222   endColorstr   45484d  GradientType 0    x000D    x000D   x000D   squaredTwo label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  9px  x000D      height  5px  x000D      background  transparent  x000D      top  4px  x000D      left  4px  x000D      border  3px solid  fcfff4  x000D      border-top  none  x000D      border-right  none  x000D   x000D      -webkit-transform  rotate -45deg   x000D      -moz-transform  rotate -45deg   x000D      -o-transform  rotate -45deg   x000D      -ms-transform  rotate -45deg   x000D      transform  rotate -45deg   x000D    x000D   x000D   squaredTwo label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 3  x000D    x000D   x000D   squaredTwo input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   x000D   x000D     SQUARED THREE    x000D   squaredThree   x000D      width  20px      x000D      margin  20px auto  x000D      position  relative  x000D    x000D   x000D   squaredThree label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D      top  0  x000D      border-radius  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255  4   x000D      -moz-box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255  4   x000D      box-shadow  inset 0px 1px 1px rgba 0 0 0 0 5   0px 1px 0px rgba 255 255 255  4   x000D   x000D      background  -webkit-linear-gradient top   222 0    45484d 100    x000D      background  -moz-linear-gradient top   222 0    45484d 100    x000D      background  -o-linear-gradient top   222 0    45484d 100    x000D      background  -ms-linear-gradient top   222 0    45484d 100    x000D      background  linear-gradient top   222 0    45484d 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   222   endColorstr   45484d  GradientType 0    x000D    x000D   x000D   squaredThree label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  9px  x000D      height  5px  x000D      background  transparent  x000D      top  4px  x000D      left  4px  x000D      border  3px solid  fcfff4  x000D      border-top  none  x000D      border-right  none  x000D   x000D      -webkit-transform  rotate -45deg   x000D      -moz-transform  rotate -45deg   x000D      -o-transform  rotate -45deg   x000D      -ms-transform  rotate -45deg   x000D      transform  rotate -45deg   x000D    x000D   x000D   squaredThree label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 3  x000D    x000D   x000D   squaredThree input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   x000D     SQUARED FOUR    x000D   squaredFour   x000D      width  20px      x000D      margin  20px auto  x000D      position  relative  x000D    x000D   x000D   squaredFour label   x000D      cursor  pointer  x000D      position  absolute  x000D      width  20px  x000D      height  20px  x000D      top  0  x000D      border-radius  4px  x000D   x000D      -webkit-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      -moz-box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      box-shadow  inset 0px 1px 1px white  0px 1px 3px rgba 0 0 0 0 5   x000D      background   fcfff4  x000D   x000D      background  -webkit-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -moz-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -o-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  -ms-linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      background  linear-gradient top   fcfff4 0    dfe5d7 40    b3bead 100    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   fcfff4   endColorstr   b3bead  GradientType 0    x000D    x000D   x000D   squaredFour label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 0    x000D      filter  alpha opacity 0   x000D      opacity  0  x000D      content      x000D      position  absolute  x000D      width  9px  x000D      height  5px  x000D      background  transparent  x000D      top  4px  x000D      left  4px  x000D      border  3px solid  333  x000D      border-top  none  x000D      border-right  none  x000D   x000D      -webkit-transform  rotate -45deg   x000D      -moz-transform  rotate -45deg   x000D      -o-transform  rotate -45deg   x000D      -ms-transform  rotate -45deg   x000D      transform  rotate -45deg   x000D    x000D   x000D   squaredFour label hover  after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 30    x000D      filter  alpha opacity 30   x000D      opacity  0 5  x000D    x000D   x000D   squaredFour input type checkbox  checked   label after   x000D      -ms-filter   progid DXImageTransform Microsoft Alpha Opacity 100    x000D      filter  alpha opacity 100   x000D      opacity  1  x000D    x000D   lt h1 gt CSS3 Checkbox Styles lt  h1 gt  x000D   x000D   lt  -- Slide ONE -- gt  x000D   lt div class  slideOne  gt    x000D       lt input type  checkbox  value  None  id  slideOne  name  check    gt  x000D       lt label for  slideOne  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Slide TWO -- gt  x000D   lt div class  slideTwo  gt    x000D       lt input type  checkbox  value  None  id  slideTwo  name  check    gt  x000D       lt label for  slideTwo  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Slide THREE -- gt  x000D   lt div class  slideThree  gt      x000D       lt input type  checkbox  value  None  id  slideThree  name  check    gt  x000D       lt label for  slideThree  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Rounded ONE -- gt  x000D   lt div class  roundedOne  gt  x000D       lt input type  checkbox  value  None  id  roundedOne  name  check    gt  x000D       lt label for  roundedOne  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Rounded TWO -- gt  x000D   lt div class  roundedTwo  gt  x000D       lt input type  checkbox  value  None  id  roundedTwo  name  check    gt  x000D       lt label for  roundedTwo  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Squared ONE -- gt  x000D   lt div class  squaredOne  gt  x000D       lt input type  checkbox  value  None  id  squaredOne  name  check    gt  x000D       lt label for  squaredOne  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Squared TWO -- gt  x000D   lt div class  squaredTwo  gt  x000D       lt input type  checkbox  value  None  id  squaredTwo  name  check    gt  x000D       lt label for  squaredTwo  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Squared THREE -- gt  x000D   lt div class  squaredThree  gt  x000D       lt input type  checkbox  value  None  id  squaredThree  name  check    gt  x000D       lt label for  squaredThree  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   lt  -- Squared FOUR -- gt  x000D   lt div class  squaredFour  gt  x000D       lt input type  checkbox  value  None  id  squaredFour  name  check    gt  x000D       lt label for  squaredFour  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Styling the arrow  amp  the checkbox colors  I haven t seen any answer deal with the arrow colors  so I thought I might add this for those wanting to also style the arrow inside the checkbox  I m not suggesting to do these things  it s just for demo purposes   x000D   x000D   checkbox-label       display  block      position  relative      margin  auto      cursor  pointer      font-size  22px      line-height  24px      height  24px      width  24px      clear  both      checkbox-label input       position  absolute      opacity  0      cursor  pointer      checkbox-label  checkbox-custom       position  absolute      top  0px      left  0px      height  24px      width  24px      background-color  transparent      border-radius  5px      transition  all 0 3s ease-out      -webkit-transition  all 0 3s ease-out      -moz-transition  all 0 3s ease-out      -ms-transition  all 0 3s ease-out      -o-transition  all 0 3s ease-out      border  2px solid  000       checkbox-label input checked    checkbox-custom       background-color   FFEA00      border-radius  5px      -webkit-transform  rotate 0deg  scale 1       -ms-transform  rotate 0deg  scale 1       transform  rotate 0deg  scale 1       opacity 1      border  2px solid  000      checkbox-label  checkbox-custom  after       position  absolute      content          left  12px      top  12px      height  0px      width  0px      border-radius  5px      border  solid  000      border-width  0 3px 3px 0      -webkit-transform  rotate 0deg  scale 0       -ms-transform  rotate 0deg  scale 0       transform  rotate 0deg  scale 0       opacity 1      transition  all 0 3s ease-out      -webkit-transition  all 0 3s ease-out      -moz-transition  all 0 3s ease-out      -ms-transition  all 0 3s ease-out      -o-transition  all 0 3s ease-out       checkbox-label input checked    checkbox-custom  after     -webkit-transform  rotate 45deg  scale 1     -ms-transform  rotate 45deg  scale 1     transform  rotate 45deg  scale 1     opacity 1    left  8px    top  3px    width  6px    height  12px    border  solid  000000    border-width  0 2px 2px 0    background-color  transparent    border-radius  0    x000D   lt div class  checkbox-container  gt           lt label class  checkbox-label  gt               lt input type  checkbox  gt               lt span class  checkbox-custom  gt  lt  span gt           lt  label gt   lt  div gt  x000D   x000D   x000D

User · Answer

Let s say you have a checkbox with the class  bootstrap   form-check-input  Then you can use an image for an example as the check mark   SCSS code    lt input class  form-check-input  type  checkbox  gt     form-check-input       width  22px      height  22px      -webkit-appearance  none      -moz-appearance  none      -o-appearance  none      appearance none      outline  1px solid blue        amp  checked               background  white url  blue svg   no-repeat           background-size  20px 20px          background-position  50  50

User · Answer

Yes  you can  Based on knowledge from colleagues here and researching on web  here you have the best solution for styling a checkbox without any third-party plugin   x000D   x000D  input type  checkbox      width  14px  important    height  14px  important    margin  5px    -webkit-appearance  none    -moz-appearance  none    -o-appearance  none    appearance  none    outline  1px solid gray    box-shadow  none    font-size  0 8em    text-align  center    line-height  1em    background  red     input type  checkbox   checked after     content         color  white    x000D   lt input type  checkbox  gt  x000D   x000D   x000D

User · Answer

Can be very simplified like that    input type  checkbox        outline 2px solid red      outline-offset  -2px      Works without any plugin

[html] Why cannot change checkbox color whatever I do?

Examples related to html

Examples related to css

Examples related to input

Examples related to checkbox

Examples related to colors