既存の CSS の改修で少々ハマったので備忘録です。
:read-only: 属性を指定してない要素にもスタイルが適用される場合がある[readonly]: 属性を指定した要素のみスタイルが適用される
ざっくり input 要素などに :read-onlyのスタイルを適用する場合は、.my-class[readonly]を対象にするなどにした方が良さそうです。
// 主なスタイル適用対象
<inputclass="my-class"type="text"readonly>
// WARNING: :read-only のスタイルは以下にも適用される
// 2021年3月18日時点で Firefox / Safari で再現、Chrome は再現せず。
<inputclass="my-class"type="submit"value="送信"><inputclass="my-class"type="file">意図しないスタイル適用を防ぐため、[readonly]の利用をお勧めします。
