【CSS】ラジオボタンにオリジナルのデザインを適用する。

方法を調べたのでメモ。

input[type="radio"]{
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #aaa;
  border-radius: 15px;
  background: transparent;
  opacity: 0.5;
  width: 15px;
}

input[type="radio"]:checked{
  background: #bbb;
  opacity:1;
}

こんな感じにするとデザインを変更できる。