非活性ラジオボタンのスタイルを設定する

• トップ
• How To
• 非活性ラジオボタンのスタイルを設定する

• 概要
• ソース
• 実行サンプル

概要

非活性のラジオボタンは薄色表示されますが、活性ボタンとの違いがあまり目立たないことがあります。CSS を用いて非活性のラジオボタンのスタイルを変更する方法を紹介します。

ソース

デフォルトのラジオボタンの上に radius を用いた円を上書きしています。

input[type="radio"]:disabled::after {
  position: absolute;
  content: "";
  width: .9em;
  height: .9em;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #aaa;
}

実行サンプル

非活性のラジオボタンが少し目立つようになりました。(※Chrome, Edge, Opera では利用できますが、Firefox だとうまく効かないようです)