はじめに
煽りタイトルです。
実際は単純に汎用的なフォームコントロールのクラスをつくって使いまわしていたら失敗した話です。
何が言いたいかというとセレクタをいろんな要素に使い回す場合は :read-onlyより [readonly]にしたほうがいいのかもしれないということです。
やりたかったこと
以下のような汎用的なクラスをつくってinputやselect要素で使いまわしたかった。
(プロパティは適当です)
CSS
.control{background:#fff;border:solid1px#999;border-radius:4px;}.control:read-only{color:red;}HTML
<div><inputclass="control"value="writable value"/></div><div><inputclass="control"value="readonly value"readonly/></div><div><selectclass="control"><option>selectable value</option></select></div>期待した表示
なにが起きたか
:read-only疑似クラスは readonly属性が利用できないselect要素など(divやspanなどもすべて)マッチするようで、以下のようになりました
実際の表示
最終的な実装
readonly属性が指定されているときに表示が変わっていればいいので属性セレクタを使用することにしました。
.control{background:#fff;border:solid1px#999;border-radius:4px;}.control[readonly]{color:red;}