【CSS】超簡単にラジオボタンをreadonlyにする

ラジオボタンは標準でreadonlyが効きませんが
CSSで簡単にできます。

pointer-events: none;

1	pointer-events: none;

だけでも変更不可になるのですが、色をグレーにして変更不可感を出します。

<style>
.radio-readonly {
  appearance: none;
  pointer-events: none;
}
.radio-readonly::before {
  content: '〇';
  color: #c0c0c0;
}
.radio-readonly:checked::before {
  content: '●';
  color: #808080;
}
</style>

<style>

.radio-readonly {

appearance: none;

pointer-events: none;

}

.radio-readonly::before {

content: '〇';

color: #c0c0c0;

}

.radio-readonly:checked::before {

content: '●';

color: #808080;

}

</style>

ラジオボタンのinputタグにradio-readonlyクラスを指定

<input name="radio1" value="1" type="radio" class="radio-readonly" />選択肢１
<input name="radio1" value="2" type="radio" class="radio-readonly" />選択肢２
<input name="radio1" value="3" type="radio" class="radio-readonly" />選択肢３

<input name="radio1" value="1" type="radio" class="radio-readonly" />選択肢１

<input name="radio1" value="2" type="radio" class="radio-readonly" />選択肢２

<input name="radio1" value="3" type="radio" class="radio-readonly" />選択肢３

実行結果：

通常のラジオボタン
選択肢１
選択肢２
選択肢３

radio-readonlyクラスを指定したラジオボタン
選択肢１
選択肢２
選択肢３

関連記事