HTML・CSSでつくるおしゃれなチェックボックスのデザイン3選

HTML・CSSでつくるチェックボックスのデザインをまとめました。丸型のものからボタン風のもの、アニメーション付きのものまでどれもコピペで簡単にカスタマイズすることが可能です。もちろん、縦並び・横並びの選択にも対応していますよ。

ボタン型のチェックボックス

ボタン型のチェックボックスのスタンダードバージョン

スタンダード

step1
デザインを調整する
  • 並び
  • 形状
step2
HTMLをコピペする
HTML
<fieldset class="checkbox-002">
    <label>
        <input type="checkbox" name="checkbox-002" checked/>
        radio1
    </label>
    <label>
        <input type="checkbox" name="checkbox-002"/>
        radio2
    </label>
    <label>
        <input type="checkbox" name="checkbox-002"/>
        radio3
    </label>
</fieldset>
step3
CSSをコピペする
CSS
.checkbox-002 {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}

.checkbox-002 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.checkbox-002 label::before {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid #d6dde3;
    content: '';
}

.checkbox-002 label:has(:checked)::after {
    position: absolute;
    top: 5px;
    left: 7px;
    transform: rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #2589d0;
    border-width: 0 3px 3px 0;
    content: '';
}

.checkbox-002 input {
    display: none;
}
ボタン型のチェックボックスの背景色付きバージョン

背景色付き

step1
デザインを調整する
  • 並び
  • 形状

チェック時に背景色ごと変わるチェックボックスです。白いチェックマークを際立たせるために、基調色はコントラストが強めの色にするのがおすすめです。

step2
HTMLをコピペする
HTML
<fieldset class="checkbox-001">
    <label>
        <input type="checkbox" name="checkbox-001" checked/>
        radio1
    </label>
    <label>
        <input type="checkbox" name="checkbox-001"/>
        radio2
    </label>
    <label>
        <input type="checkbox" name="checkbox-001"/>
        radio3
    </label>
</fieldset>
step3
CSSをコピペする
CSS
.checkbox-001 {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 2em;
    border: none;
}

.checkbox-001 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.checkbox-001 label::before,
.checkbox-001 label:has(:checked)::after {
    content: '';
}

.checkbox-001 label::before {
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background-color: #e6edf3;
}

.checkbox-001 label:has(:checked)::before {
    background-color: #2589d0;
}

.checkbox-001 label:has(:checked)::after {
    position: absolute;
    top: 6px;
    left: 6px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.checkbox-001 input {
    display: none;
}

リスト型のチェックボックス

リスト型のチェックボックスの枠線×背景色ありバージョン

枠線×背景色あり

step1
デザインを調整する
  • 形状
step2
HTMLをコピペする
HTML
<fieldset class="checkbox-003">
    <label>
        <input type="radio" name="checkbox-003" checked/>
        radio1
    </label>
    <label>
        <input type="radio" name="checkbox-003"/>
        radio2
    </label>
    <label>
        <input type="radio" name="checkbox-003"/>
        radio3
    </label>
</fieldset>
step3
CSSをコピペする
CSS
.checkbox-003 {
    border: none;
}

.checkbox-003 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 200px;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid #2589d0;
    border-radius: 3px;
    background-color: #2589d026;
    cursor: pointer;
}

.checkbox-003 label:has(:checked) {
    background-color: #2589d0;
    color: #fff;
}

.checkbox-003 label::before {
    width: 14px;
    height: 14px;
    border-radius: 1px;
    background-color: #fff;
    content: '';
}

.checkbox-003 label:has(:checked)::after {
    position: absolute;
    top: 14px;
    left: 15px;
    transform: rotate(45deg);
    width: 4px;
    height: 8px;
    border: solid #2589d0;
    border-width: 0 2px 2px 0;
    content: '';
}

.checkbox-003 input {
    display: none;
}