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

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

条件

  • html

ポイント

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

サンプルソース

<html>
  <form>
      <input type="checkbox" id="check1" name="selectionCheck1" disabled checked>チェック1
      <input type="checkbox" id="check2" name="selectionCheck1" disabled>チェック2
      <br>
      <input type="radio" id="radio1" name="selectionRadio1" disabled>ラジオ1
      <input type="radio" id="radio2" name="selectionRadio1" disabled checked>ラジオ2
      
      <hr>
      
      <input type="checkbox" id="check3" name="selectionCheck1" style="pointer-events: none">チェック3
      <input type="checkbox" id="check4" name="selectionCheck1" style="pointer-events: none" checked>チェック4
      <br>
      <input type="radio" id="selection" name="selectionRadio2" style="pointer-events: none" checked>ラジオ3
      <input type="radio" id="selection" name="selectionRadio2" style="pointer-events: none">ラジオ4
  </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

コメントを残す

メールアドレスが公開されることはありません。