隣接セレクタを使ってJavaScript無しでチェックボックスをカスタムする ✅

DEMO

See the Pen
Custom CheckBox without JavaScript by kimmy (@kimmy)
on CodePen.

解説

checkboxとlabalと隣接セレクタをうまく使えば、JavaScriptを一切書かずにチェックボックスをカスタムすることができます。
ポイントとしては、

❶ チェックボックスは非表示にしておく
❷ labelでチェックボックスにチェックが入るようにしておく
❸ :checkedの隣接セレクタでスタイルを整える

の3点です。

ソースコード

HTML

<p>
  <input type="checkbox" id="c1" />
  <label for="c1"></label>
  <span>CHECK</span>
</p>

SCSS

p {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  padding: 16px 48px;
  border: solid 4px #212121;
  border-radius: 32px;;
  color: #212121;
  font: 24px 'Rowdies';
  overflow: hidden;
  
  label {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: #fafafa;
    transition: background .2s ease-in-out;
    cursor: pointer;
  }
  
  span {
    position: relative;
    color: #212121;
    transition: color .2s ease-in-out;
    pointer-events: none;
  }
  
  input {
    display: none;

    &:checked {
      + label {
        background: #212121;
        
        + span {
          color: #fafafa;
        }
      }
    }
  }
}