mitsuのぶろぐ

基本的にはプログラミングの話のつもり。

IEでreadonlyのinputにcssを当てたくなった時の対処

日々大きな壁として立ちはだかるIEくんに対して頑張ったお話のひとつです。

よくある実装のひとつだと思うのですが、そのinputがreadonlyだったときに、ぱっと見でreadonlyだと識別できるようにスタイルを変えたいというところの実装をしていました。

結論

input[readonly] {
  background-color: gray
}

で対処できました。
(正直当たり前といえば当たり前なのですが)

もともとやっていたこと

input:read-only {
  background-color: gray
}

Chromeだとこれで動いていたんですよね。
そしていざIEで確認してみたところ、ちゃんと効いてない。

調べてみたところ、 :read-only の擬似クラスはIEではサポートされてないとのことでした。
(なるほどそれは動かない 笑)

developer.mozilla.org

興味深かったところ

input[type="text"][readonly] {
  background-color: gray
}

といった形で [ ] を2つつなげても動いた・・・
まあ確かに

input:read-only.hoge-class {
  background-color: gray
}

みたいな形でつなげても動作するので、こちらも当たり前といえば当たり前か・・・(CSSセレクターももう少し勉強が必要ですね)

いつまで動いてるかわかりませんが、下記のjsFiddleは実験物

jsfiddle.net