Checkbox

checkbox.markdown

Checkbox

A Pen by IpsumLorem16 on CodePen.

License.

index.html

<div class="checkbox-container">
  <input id="checkbox-1" type="checkbox" checked>
  <label for="checkbox-1">Checkbox</label>
  <span class="custom-checkbox" aria-hidden="true">✓</span>
</div>

<div class="checkbox-container chk-purple">
  <input id="checkbox-2" type="checkbox" checked>
  <label for="checkbox-2">Checkbox</label>
  <span class="custom-checkbox" aria-hidden="true">✓</span>
</div>

<div class="checkbox-container chk-orange">
  <input id="checkbox-3" type="checkbox" checked>
  <label for="checkbox-3">Checkbox</label>
  <span class="custom-checkbox" aria-hidden="true">✓</span>
</div>

<!-- disabled styles -->
<div class="checkbox-container">
  <input id="checkbox-4" type="checkbox" disabled>
  <label for="checkbox-4">Checkbox</label>
  <span class="custom-checkbox" aria-hidden="true">✓</span>
</div>

<div class="checkbox-container">
  <input id="checkbox-5" type="checkbox" disabled checked>
  <label for="checkbox-5">Checkbox</label>
  <span class="custom-checkbox" aria-hidden="true">✓</span>
</div>

style.css

.checkbox-container {
  --blue: #2196f3;
  --orange: #f44336;
  --purple: #5628ee;
  --checkbox-color: var(--blue);
  display: inline-block;
  position: relative;
  margin: 10px;
}
.checkbox-container.chk-purple {
  --checkbox-color: var(--purple);
}
.checkbox-container.chk-orange {
  --checkbox-color: var(--orange);
}
.checkbox-container input[type="checkbox"] {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}
/* focus ring */
.checkbox-container input[type="checkbox"]:focus ~ .custom-checkbox {
  border: 2px solid #2196f3; /* var fall back  */
  border: 2px solid var(--checkbox-color);
}
.checkbox-container input[type="checkbox"] ~ .custom-checkbox:after {
  display: inline-block;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 6px;
  top: -2px;
  position: absolute;
  left: -2px;
  content: "";
  opacity: 0;
  box-shadow: 0px 0px 0px 0px #2196f3; /*var fall back*/
  box-shadow: 0px 0px 0px 0px var(--checkbox-color);
  transition: all 0.2s;
}
.checkbox-container input[type="checkbox"]:focus ~ .custom-checkbox:after {
  opacity: 0.4;
  box-shadow: 0px 0px 0px 2px #2196f3; /*var fall back*/
  box-shadow: 0px 0px 0px 2px var(--checkbox-color);
}
.checkbox-container input[type="checkbox"]:checked ~ .custom-checkbox {
  color: white;
  border: 2px solid #2196f3; /* var fall back  */
  border: 2px solid var(--checkbox-color);
  background-color: #2196f3; /* var fall back  */
  background: var(--checkbox-color);
  transition: all 0.2s !important;
}
.checkbox-container label {
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  user-select: none;
  padding-left: 30px;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  font-size: 14px;
  color: #6c7486;
  /* prevent focus blue highlight on mobile tap  */
  -webkit-tap-highlight-color: transparent; 
}
.checkbox-container label:hover ~ .custom-checkbox {
  border: 2px solid #2196f3; /* var fall back  */
  border: 2px solid var(--checkbox-color);
}
.checkbox-container .custom-checkbox {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 2px solid #cdd9ed;
  pointer-events: none;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 19px;
  color: #ffffff00;
  font-weight: bold;
  font-size: 12px;
  transition: border 0.3s, color 0.2s, background-color 0.2s;
}
/* disabled styles */
.checkbox-container input[type="checkbox"]:disabled ~ label {
/*   opacity:0.6; */
  color: #a7acb7;
  pointer-events: none;
}
.checkbox-container input[type="checkbox"]:disabled ~ .custom-checkbox {
  filter: grayscale(1);
  background-color: #f5f5f5;
  border: 2px solid #efefef
/*   opacity: 0.4; */
}
.checkbox-container input[type="checkbox"]:disabled:checked ~ 
.custom-checkbox {
  filter: grayscale(1);
  background-color: #cfcfcf;
  border: 2px solid #cfcfcf;
/*   opacity: 0.4; */
}