about

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

2023/2/182023/2/18

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

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

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

スタンダード

<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>

.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;
}

ボタン型のチェックボックスの背景色付きバージョン

背景色付き

基調色：#2589d0
並び横縦
形状四角円

radio1 radio2 radio3

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

<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>

.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;
}

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

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

枠線×背景色あり

<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>

.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;
}