checkboxやradioボタンでデフォルトのデザインを変更する方法
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
.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もほぼ、いや、全く同じことをすればできるので試してみてください。
Author And Source
この問題について(checkboxやradioボタンでデフォルトのデザインを変更する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/w-tdon/items/fc0da37ea5ffaea4429d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .