QA@IT

無効化されたチェックボックスをIE9で見た時に、以前のIEのようにわかりやすく表示するには

11660 PV

HTMLのチェックボックスを無効化すると、IE9では無効化されていることが見た目ではわかりにくくなってしまいました。

無効化されたチェックボックスとはこのようなものです。

<input type="checkbox" disabled="disabled" />

チェックボックスのサンプル

以前のIEのようにグレーで表示するなど、無効化されていることをわかりやすく表示するにはどうしたらよいでしょうか。

回答

以下のような CSS を設定すると IE9 でも以前の IE のような表示になるようです。

input[type=checkbox] {
  border-style: none;
}

UPDATE: Windows XP スタイルを使っていて checkbox, radio ボタンにスタイルを IE 以外にも効かせるようにするのは、たしかにできないようです。以下のようにラベルのほうの色で表現するのが無難なのではないでしょうか。

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  label > [disabled] + span {
    color: GrayText;
  }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" name="foobar">
    <span>ラベル</span>
  </label>
  <label>
    <input type="checkbox" name="foobar" disabled="disabled">
    <span>ラベル</span>
  </label>
</body>
</html>
編集 履歴 (2)
  • ありがとうございます!
    確認しますので少々お時間ください。
    -
  • 確認できました。ありがとうございました!
    しかし、本当の原因はIE9ではなく、OSかもしれません。(続く)
    -
  • Win XP上のFirefoxとChromeではIE8と同じようにグレーでしたが、Win Vista上のFirefoxとChromeもIE9と同じように無効化されていても白かったです。教えていただいたスタイルシートはIE9には有効でしたがFirefoxとChromeには効きませんでした。 -
  • Firefox, Chrome では確認してませんでした。たしかにうまくいかないですね。しかたがないので追記したように [disabled] + span などで表現するのが現実解かな、と思います -
  • いいお考えだと思います!そのようにすることにします。当初の質問から変わってしまったのにもかかわらず、再度回答いただきありがとうございました。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。