checkboxやradioボタンでデフォルトのデザインを変更する方法
割とよくやるので忘れないためにメモ。
やりたいこと
このデフォルトのデザインから
こんなかっこいい感じにしたい。。(かっこよくないけど。。。)
コード
html
<ul class="list">
<li class="list__item">
<label>
<input type="radio" name="radio_button" class="input">
<span class="text">ラジオ1</span>
</label>
</li>
<li class="list__item">
<label>
<input type="radio" name="radio_button" class="input">
<span class="text">ラジオ2</span>
</label>
</li>
<li class="list__item">
<label>
<input type="radio" name="radio_button" class="input">
<span class="text">ラジオ3</span>
</label>
</li>
</ul>
css
.css
.list {
list-style-type: none;
padding: 0;
margin: 0;
}
.input {
display: none;
}
.text {
position: relative;
}
.text:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
border: 1px solid #ff0000;
border-radius: 50%;
}
.input:checked + .text:after {
position: absolute;
top: 3px;
left: 3px;
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff0000;
}
.input:checked + .text {
color: #ff0000;
}
ポイント
そこまで難しいことは何もないです。
まずinputをdisplay:none;で非表示にして、
.text:beforeで代わりになる丸い枠を作っています。
.input:checked + .text:afterの部分は
隣接セレクトですね。あまり使わないので忘れていましたが、
要素と要素が直接隣接している時に直後の要素(ここで言う.text:afterです。)に適用されるものですね。
なので、
checkedがついた時.textのafterにはこのcssが適用されますよ〜とちっこい丸が
.text:beforeの中に表示されるように作っています。
※言わなくてもわかるよって言われるかもしれませんが、labelタグで囲っているのでその範囲でクリックすればinputはcheckedになります。
まとめ
以上で終わりです。
radioボタンのことしか書きませんでしたが、
checkboxもほぼ、いや、全く同じことをすればできるので試してみてください。