Customized checkboxes with CSS

In this example below you will see how to do a Customized checkboxes with CSS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by phuffstickler, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright phuffstickler ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Customized checkboxes with CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <link rel='stylesheet prefetch' href='https://mui.aws.manheim.com/0.12.0/man-customer/css/mui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="mui-m-b mui-p-b">
  <h3>Default</h3>
  <label>
    <input checked type="checkbox">
    Check it out
  </label>
  <label>
    <input disabled checked type="checkbox">
    Check it out
  </label>
  <label>
    <input disabled type="checkbox">
    Check it out
  </label>
  <label>
    <input indeterminate type="checkbox">
    Check it out
  </label>
</div>

<div class="with-custom-css mui-m-b mui-p-b">
  <h3>appearance: none</h3>
  <label>
    <input checked type="checkbox">
    Check it out
  </label>

  <label disabled>
    <input disabled type="checkbox">
    Check it out
  </label>

  <label disabled>
    <input disabled checked type="checkbox">
    Check it out
  </label>

  
  
  
</div>


<div class="with-zoom mui-m-b mui-p-b">
  <h3 style="margin:0">zoom: 1.1</h3>
  <label>
    <input checked type="checkbox">
    Check it out
  </label>

  <label disabled>
    <input disabled type="checkbox">
    Check it out
  </label>
  
  <label disabled>
    <input disabled checked type="checkbox">
    Check it out
  </label>

  <label>
    <input type="checkbox">
    Check it out
  </label>
</div>







<!-- <br />
<br />
<div class="with-custom-css mui-m-t mui-p-t">
<label for="check1">Check it out</label>
<input checked name="check1" type="checkbox">


<label>
Check it out
<input checked type="checkbox">
</label>
</div> -->



<h3>Indeterminate Checkboxes (default)</h3>

<ul class="no-bullets">
  <li>
    
    <label>
      <input type="checkbox" class="indeterminate">
      Indeterminate checkbox
    </label>

    <ul>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label disabled>
          <input disabled type="checkbox" class="indeterminate">
          Indeterminate checkbox
        </label>
        <ul>
          <li>
            <label disabled>
              <input checked disabled type="checkbox">
              Check it out
            </label>
          </li>
          <li>
            
            <label disabled>
              <input disabled type="checkbox">
              Check it out
            </label>
          </li>
        </ul>
      </li>
      <li>
        
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
    </ul>
  </li>
  <li>
    <label>
      <input type="checkbox" class="indeterminate">
      Indeterminate checkbox
    </label>
    <ul>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
    </ul>
  </li>
</ul>




<br />

<div class="with-custom-css">
<h3>Indeterminate Checkboxes (appearance:none)</h3>

<ul class="no-bullets">
  <li>
    
    <label>
      <input type="checkbox" class="indeterminate">
      Indeterminate checkbox
    </label>

    <ul>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label disabled>
          <input disabled type="checkbox" class="indeterminate">
          Indeterminate checkbox
        </label>
        <ul>
          <li>
            <label disabled>
              <input disabled checked type="checkbox">
              Check it out
            </label>
          </li>
          <li>
            
            <label disabled>
              <input disabled type="checkbox">
              Check it out
            </label>
          </li>
        </ul>
      </li>
      <li>
        
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
    </ul>
  </li>
  <li>
    <label>
      <input type="checkbox" class="indeterminate">
      Indeterminate checkbox
    </label>
    <ul>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Check it out
        </label>
      </li>
    </ul>
  </li>
</ul>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/phuffstickler/customized-checkboxes-with-css-peOdVX */
body {
  margin: 10px;
}

label {
  margin-bottom: 10px;
}

.no-bullets, .no-bullets ul {
  list-style: none;
}

.default {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

.with-custom-css {
  /* For setting FF to default native styles */
  /* For IE 10 & 11 */
}
.with-custom-css input[type=checkbox] {
  padding: 0;
  -moz-box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  /*outline:2px solid #005aab;*/
  background: transparent;
  background-color: #f8f8f8;
  cursor: pointer;
  font-size: 0;
  -moz-box-shadow: none;
  box-shadow: none;
  margin-right: 2px;
  border: 1px solid #b9b9b9;
  outline: 0;
  border-radius: 4px;
  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.18);
}
.with-custom-css input[type=checkbox]:indeterminate {
  background: url("http://honemedia.com/horizontal_line.svg") right 50% top 50% no-repeat;
  background-size: 13px;
  background-color: #005aab;
  border: none;
}
.with-custom-css input[type=checkbox]:checked {
  background: url("http://honemedia.com/down_arrow.svg") right 50% top 50% no-repeat;
  background-size: 13px;
  /*
  outline-color: #e7a614;
  */
  background-color: #005aab;
  border: none;
}
.with-custom-css input[type=checkbox]:hover {
  border: 2px solid #005aab;
}
.with-custom-css input[type=checkbox]:focus {
  border: 2px solid #005aab;
  box-shadow: 0 0 4px #005aab;
}
.with-custom-css input[type=checkbox][disabled], .with-custom-css input[type=checkbox][disabled]:indeterminate {
  cursor: not-allowed;
  /*outline:2px solid #999;
  outline:2px solid #ddd \9;*/
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.with-custom-css label {
  vertical-align: middle;
  max-width: 250px;
  cursor: pointer;
}
.with-custom-css label[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
@-moz-document url-prefix() {
  .with-custom-css input[type=checkbox], .with-custom-css input[type=checkbox]:checked {
    -moz-appearance: checkbox;
    appearance: checkbox;
  }
}
.with-custom-css input[type=checkbox]::-ms-check {
  border: 0;
  border: none;
  background: none;
  display: none;
  background-image: none;
  background-clip: padding-box;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .with-custom-css input[type=checkbox], .with-custom-css input[type=checkbox][disabled] {
    box-shadow: inset -0.5px -0.6px 2px rgba(0, 0, 0, 0.9);
  }
}

.with-zoom input[type=checkbox] {
  zoom: .5;
  width: 38px;
  height: 38px;
  vertical-align: middle;
}
.with-zoom label {
  vertical-align: middle;
  max-width: 250px;
  height: 41px;
  position: relative;
  top: 20px;
}
.with-zoom label[disabled] {
  opacity: .2;
}

/* Legacy checkboxes for Android and iOS can be fixed to show default by using the @supports media query.. however, IE 10 and 11 don't support that so it then breaks on IE 10 and 11. So, unless we need to support Android 4.0 or below, we are good to not need @supports */


/*Downloaded from https://www.codeseek.co/phuffstickler/customized-checkboxes-with-css-peOdVX */
var indeterminateCheckboxes = document.getElementsByClassName("indeterminate");
for (var i = 0, len = indeterminateCheckboxes.length; i < len; i++) {
  indeterminateCheckboxes[i].indeterminate = true;
}

Comments