How can I style checkbox with css?

Question

Hi I've got a problem in styling checkbox ,no matter I give border ,color or border radius, it doesn't change.

Answer 1

Depending on browser support and how fancy your checkbox needs to look you can style the checkbox directly - this will work in IE11... and modern browsers ;-)

My guess is you are missing -webkit-appearance: none;

/* Basic styling */

[type=checkbox] {
  width: 2rem;
  height: 2rem;
  color: dodgerblue;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
}


/* Pseudo element for check styling */

[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}


/* Checked */

[type=checkbox]:checked {
  background-color: currentcolor;
}

[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

[type=checkbox]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}


/* IE */

[type=checkbox]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

[type=checkbox]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

<input type="checkbox" />
<input type="checkbox" checked/>
<input type="checkbox" disabled/>
<input type="checkbox" checked disabled/>

Answer 2

The only way of styling a checkbox reliably is to hide the original checkbox and create an object that looks and behaves like a checkbox. In my projects I use the label:before-element:

HTML:
-----
<input class="u-is-hidden" name="myCheckbox" type="checkbox" value="0" checked>
<input id="myCheckbox" class="c-checkbox" name="myCheckbox" type="checkbox" value="1">
<label class="c-checkbox__label" for="myCheckbox">
  lorem ipsum dolor sit amet
</label>

The first input will just deliver a zero value when the checkbox is not checked.

The second input is the real checkbox. It is hidden, but it will deliver our value to the $_POST-array when checked without any JS. Very convenient.

The labe does all the 'magic': In this example it morphes from a checkbox into a "checked" mark when the checkbox is checked (SCSS):

CSS:
----
$checkbox-size: 1.2em;
$checkbox-anim-dur: 0.15s;
$checkbox-anim-ease: ease-out;



.c-checkbox {
 position: relative;
 display: block;

 border: none;
 padding: 0;
 height: 1px;

 opacity: 0;

 // shift user notification to correct position
 margin-right: -1em;
 width: 1em;
 top: 10px;



  &__label {
    position: relative;
    display: block;

    padding-left: ($checkbox-size + 0.8em);
    text-align: left;

    font-size: 0.9em;

    cursor: pointer;

    &:before {
      @include absolute(top ($checkbox-size * 0.1) left 0);
      @include size($checkbox-size);

      display: inline-block;
      content: ' ';

      border: 1px solid gray;

      background-color: white;
      box-shadow: inset 0 0 0 2px white;

      transition: all $checkbox-anim-dur $checkbox-anim-ease;
    }

    &:hover:before {
     background-color: green;
    }
  }
}



.c-checkbox:checked+.c-checkbox__label:before {
  @include size(($checkbox-size / 2.4), $checkbox-size);

  top: ($checkbox-size * - 0.1);

  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid green;
  border-bottom: 2px solid green;

  background-color: transparent;
  box-shadow: none;

  transform: rotateZ(37deg);
  transform-origin: 100% 100%;
}