ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

CSS:テキストボックスがreadonlyな場合の色の変更

選択されたら、選択された値を表示するように、以前システムに機能を追加しました。
ajya.hatenablog.jp

選択された値を変更されたくないので、テキストボックスにreadonly属性をつけて読み取り専用にしていますが、見た目では入力できるか違いがわかりません。
JavaScriptでreadonly属性をつけているので、見た目の違いをつけるために、JavaScriptで色を変更してもいいのですが、CSSでできないかと方法を探しました。

f:id:AJYA:20180805065204p:plain
unsplash-logoCharles Deluvio 🇵🇭🇨🇦

探した結果、複数の方法を見つけましたが、以下のように記述した際だけ色が変わりました。

input[readonly] {
	color: #417bbc;
	background-color: #E2E8E7;
	cursor: not-allowed;
}

他の方法で変わらなかった理由までは突き詰めていませんが、どうしてできないのか不思議に思っています。