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もほぼ、いや、全く同じことをすればできるので試してみてください。