使ってはいけない `:read-only` 疑似クラス

はじめに

煽りタイトルです。
実際は単純に汎用的なフォームコントロールのクラスをつくって使いまわしていたら失敗した話です。

何が言いたいかというとセレクタをいろんな要素に使い回す場合は :read-only より [readonly] にしたほうがいいのかもしれないということです。

やりたかったこと

以下のような汎用的なクラスをつくってinputやselect要素で使いまわしたかった。
(プロパティは適当です)

CSS

.control {
  background: #fff;
  border: solid 1px #999;
  border-radius: 4px;
}
.control:read-only {
  color: red;
}

HTML

<div>
  <input class="control" value="writable value" />
</div>
<div>
  <input class="control" value="readonly value" readonly />
</div>
<div>
  <select class="control">
    <option>selectable value</option>
  </select>
</div>

期待した表示

なにが起きたか

:read-only 疑似クラスは readonly 属性が利用できないselect要素など(divやspanなどもすべて)マッチするようで、以下のようになりました

実際の表示

最終的な実装

readonly 属性が指定されているときに表示が変わっていればいいので属性セレクタを使用することにしました。

.control {
  background: #fff;
  border: solid 1px #999;
  border-radius: 4px;
}
.control[readonly] {
  color: red;
}