やあ。今日も今日とてCSSの沼にハマっているかい？
フロントエンドをやっていると、「フォーム周りのスタイリング、なんでこんなに泥臭いんだ……」と頭を抱えたくなる瞬間が必ず訪れる。特に、ユーザーが入力できる状態なのか、それとも読み取り専用（readonly）なのか、あるいは無効化（disabled）されているのかによって、スタイルの切り替えに苦労した経験はないだろうか。
今日は、そんなフォームスタイリングのモヤモヤを鮮やかに解決してくれる、中級者なら絶対に押さえておきたい隠し味――いや、実務で超強力な武器になる擬似クラス `:read-write` について話をしよう。
公式リファレンスを読めば「ユーザーが編集可能な要素を選択する」と一言で書いてある。だが、現場のプロが知りたいのはそんな表面的定義じゃない。「ブラウザの裏側でどう動いていて、どの要素にヒットし、どう実務のコードを美しく保てるか」だよね。
さあ、深掘りしていこうか。
—
1. `:read-write` とは何か？（仕様と現場での解釈）
一言で言えば、`:read-write` は「ユーザーが値を書き換えられる状態にあるDOM要素」をスナイパーのように正確に撃ち抜く擬似クラスだ。
対になる存在として `:read-only` がある。こいつらは兄弟のような関係で、だいたいセットで語られることが多い。
だが、実務で触っていると「えっ、お前もそれに反応するの！？」というブラウザの気まぐれ（仕様の厳密な解釈）にぶつかる。
ブラウザの裏側：こいつは一体どこをターゲットにしているのか？
CSS Selector Level 4で定義されたこの `:read-write`、実は以下の要素たちにマッチする。
1. 通常の `` 要素 (`type=”text”`, `type=”email”`, `type=”number”` など、デフォルトで入力できるもの)
2. `