お疲れ。ちょっといいか。
最近のコードレビューをしていて、フォーム周りのスタイリングで「あ、これまだ昔の癖を引きずってるな」って思う実装をよく見かけるんだ。具体的に言うと、`input[readonly]` や `.is-disabled` みたいなクラスをわざわざJavaScriptやCSSで付与してスタイリングしているケースね。
おいおい、ちょっと待てと。モダンなCSSには、ブラウザが勝手に状態を判定して切り替えてくれる強力な擬似クラスが標準装備されているんだよ。それが今回話す `:read-only` と `:read-write` だ。
今回は、この2つの擬似クラスの基本から、現場でめちゃくちゃ重宝する `contenteditable` との組み合わせ、そして「おっ」と言わせる実務的なスタイリングの極意まで、余すところなく伝授しよう。フォームUIの解像度が一段階上がるはずだから、しっかりついてきてくれ。
—
1. そもそも `:read-only` と `:read-write` とは何か？
一言で言えば、「要素の中身をユーザーが編集できるか否か」をブラウザ自身に判定させ、スタイリングするためのフラグだ。
これまでの現場では、読み取り専用のテキストボックスに対してこんなCSSを書くことが多かったはずだ。
/ 昔ながらの泥臭いセレクタ /
input[readonly],
input:disabled {
background-color: #eee;
color: #666;
}
ここで重要なのは、`:disabled` は「無効化されている（フォーカスも当たらない）」状態だが、`:read-only` は「値は存在し、フォーム送信もされるが、ユーザーが直接書き換えることはできない」状態を指すという点だ。
そして `:read-write` はその対義語。デフォルトの `` や `