Styling checkbox without scripts and extra markup

Firefox, Edge, Webkit browsers @supports https://caniuse.com/#feat=css-featurequeries CSS appearence https://caniuse.com/#feat=css-appearance

by villard

HTML

Checkbox<br>
<input type="checkbox"><br>
<br>
Disabled checkbox<br>
<input type="checkbox" disabled>

CSS

@supports ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none)) {
  input[type="checkbox"] {
    -webkit-appearance: none; /* Webkit, MS Edge */
    -moz-appearance: none;
    appearance: none;

    height: 22px;
    width: 22px;
    border: #000 3px solid;
    border-radius: 3px;
  }
  input[type="checkbox"]:checked {
    background: url("data:image/png;base64,iVBOR\
      w0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAA\
      AbElEQVR42mPAArIYbjMEYgoLMPxh+A+EGGAnWLgCX\
      TgMLHwWXZiL4SdYQg7CdYVLrEc2ZjKQuQbM8gELX4O\
      p+g+GbUDXfAKz1GASOgxfwQIvwGQzspW6DL+g+u6hu\
      8YYKqGH6S1rhkcM3cgCAJYcLhE+svNWAAAAAElFTkS\
      uQmCC") no-repeat 50% 50%;
  }
  input[type="checkbox"][disabled] {
    opacity: 0.5;
  }
}