🐷

CSS: ラジオボタンのアクセントカラーを変更する

2021/07/04に公開

CSS

HTML

tech

ラジオボタンの選択時の色だけ変えたかったのですが、難しいっぽいのでそれっぽい実装をなるべくコンパクトな実装でやってみました。

完成例

要点

デフォルトのラジオボタンinput[type="radio"]は非表示にしてしまう。
ラジオボタンの後ろのテキストのbefore擬似要素で◉を表現する。
ラジオボタンが選択されていないときは:not(:checked)、ラジオボタンが選択されているときは:checkedで当てるCSSを切り替えられる。
background-clipを使うと枠線と背景の間に隙間を開けられる。これで◉を表現できる。

<label class="radio-label">
  <input type="radio" name="open-page" value="currenttab" checked />
  <span class="radio-text">現在のタブ</span>
</label>
<label class="radio-label">
  <input type="radio" name="open-page" value="newtab" />
  <span class="radio-text">新しいタブ</span>
</label>
<label class="radio-label">
  <input type="radio" name="open-page" value="newwindow" />
  <span class="radio-text">新しいウィンドウ</span>
</label>

.radio-label {
  display: block;
}

input[type="radio"] {
  display: none;
}

.radio-text:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  padding: 2px;
  background-clip: content-box;
}

input[type="radio"]:not(:checked) + .radio-text:before {
  border-color: #72767b;
}

input[type="radio"]:checked + .radio-text:before {
  border-color: #ffa000;
  background-color: #ffa000;
}

完成例

要点

Discussion