ラジオボタンやチェックボックスを操作不可でグレーアウトしない方法

確認飛行物体

2年前

ラジオボタンやチェックボックスを操作不可でグレーアウトしない方法をご紹介します。

1 条件
2 ポイント
3 サンプルソース
4 実際の表示
5 参考
- 5.1 stackoverflow：how do you change color of disable radio button

条件

html

ポイント

inputタグに「style=”pointer-events: none”」を記述します。

サンプルソース

<html>
  <form>
      <input type="checkbox" id="check1" name="selectionCheck1" disabled checked>チェック１
      <input type="checkbox" id="check2" name="selectionCheck1" disabled>チェック２
      <br>
      <input type="radio" id="radio1" name="selectionRadio1" disabled>ラジオ１
      <input type="radio" id="radio2" name="selectionRadio1" disabled checked>ラジオ２
      
      <hr>
      
      <input type="checkbox" id="check3" name="selectionCheck1" style="pointer-events: none">チェック３
      <input type="checkbox" id="check4" name="selectionCheck1" style="pointer-events: none" checked>チェック４
      <br>
      <input type="radio" id="selection" name="selectionRadio2" style="pointer-events: none" checked>ラジオ３
      <input type="radio" id="selection" name="selectionRadio2" style="pointer-events: none">ラジオ４
  </form>
</html>

実際の表示

上のチェックボックスおよびラジオボタンは、「disabled」を指定した場合です。
操作は出来なくなりますが、グレーアウトしてしまい視認性が悪くなります。

下のチェックボックスおよびラジオボタンは、「style=”pointer-events: none”」を指定した場合です。
操作付加かつグレーアウトしない状態で表示されます。
style=で指定している箇所をcssに切り出して記述すれば、より柔軟なデザイン表示を行うことも出来ます。

参考

stackoverflow：how do you change color of disable radio button

https://stackoverflow.com/questions/71416167/how-do-you-change-color-of-disable-radio-button