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

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

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>