IEでreadonlyのinputにcssを当てたくなった時の対処
日々大きな壁として立ちはだかるIEくんに対して頑張ったお話のひとつです。
よくある実装のひとつだと思うのですが、そのinputがreadonlyだったときに、ぱっと見でreadonlyだと識別できるようにスタイルを変えたいというところの実装をしていました。
結論
input[readonly] { background-color: gray }
で対処できました。
(正直当たり前といえば当たり前なのですが)
もともとやっていたこと
input:read-only { background-color: gray }
Chromeだとこれで動いていたんですよね。
そしていざIEで確認してみたところ、ちゃんと効いてない。
調べてみたところ、 :read-only
の擬似クラスはIEではサポートされてないとのことでした。
(なるほどそれは動かない 笑)
興味深かったところ
input[type="text"][readonly] { background-color: gray }
といった形で [ ]
を2つつなげても動いた・・・
まあ確かに
input:read-only.hoge-class { background-color: gray }
みたいな形でつなげても動作するので、こちらも当たり前といえば当たり前か・・・(CSSのセレクターももう少し勉強が必要ですね)
いつまで動いてるかわかりませんが、下記のjsFiddleは実験物