CSSでラジオボタンとチェックボックスをデザインする

More than 3 years have passed since last update.

チェックボックスやラジオボタンをデザインする方法の1つをご紹介。


チェックボックスをデザイン

a.png



  1. <input type="checkbox">自体を非表示にします。

  2. 非表示にしてもチェック出来るようにする為、<input type="checkbox"><label>タグで囲います。

  3. チェックボックスを表示させる為、<input type="checkbox">の後ろに<span>要素を入れます。

  4. チェックボックスが、チェックされてる時、されてな時に応じて<span>のbefore擬似要素に対して、任意のスタイルを指定してあげます。


html

<label>

<input type="checkbox" class="checkbox" />
<span class="checkbox-icon"></span>
チェックボックス
</label>


css

.checkbox {

display: none;
}
.checkbox + .checkbox-icon {
position: relative;
vertical-align: middle;
}
.checkbox + .checkbox-icon:before {
content: "\f372";
font-family: "Ionicons";
color: #ccc;
font-size: 22px;
}
.checkbox:checked + .checkbox-icon:before {
content: "\f374";
color: #17bcdf;
}



ラジオボタンをデザイン

b.png

上記と同じ方法でラジオボタンもデザインできます。


html

<label>

<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン1
</label>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン2
</label>


css

.radio {

display: none;
}
.radio + .radio-icon:before {
content: "\f3a6";
font-family: "Ionicons";
color: #ccc;
font-size: 22px;
}
.radio:checked + .radio-icon:before {
content: "\f3a7";
color: #17bcdf;
}