[css]checkboxをデザインするよ

スイッチの切替的な見た目のアレにする。

やっていく
1. html
2. css（SCSS）

やっていく

こういう感じのやつ。

html

<input type="checkbox" name="" value="">

最低限inputだけあればいい。だから設置に手間はない感じ。

css（SCSS）

要点。

input[type="checkbox"]{
    width: 36px;
    height: 20px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    &::before{
        content: "";
        width: 36px;
        height: 6px;
        border-radius: 3px;
        display: block;
        background-color: #ccc;
        position: absolute;
        left: 0;
        top: calc(50% - 3px);
    }
    &::after{
        content: "";
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 50%;
        background-color: #111;
        position: absolute;
        left: 0;
        top: calc(50% - 10px);
        transition: left .2s, background-color .2s;
    }
    &:checked::after{
        background-color: blue;
        left: 16px;
    }
}

inputは疑似要素を使えるので、2つとも使えば作れるという話。画像の切り替えじゃないからアニメーションもつけられる。上記はチェック時に動くようにしてるけど、:hoverも作ればもっとリッチになる。影をつけるとか、丸の色を変えるとか。

inputの領域内に疑似要素を配置してあるからちゃんとクリックできる。見た目以外は通常通りのcheckboxだから<label>で囲うなりforで紐付けるなりしても普通に使える。

そんな感じで。