こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSって、最初はボタンの色を変えたり文字を大きくしたりするだけで魔法みたいに楽しくてワクワクしますよね。でも、いざフォーム（お問合せ入力欄など）を作り始めると、「あれ？ 選択できないようにしたはずなのに枠線が出ちゃう」「入力できる状態の時だけデザインを変えたいのに、どう書けばいいんだっけ……？」なんて、ちょっとした沼にハマり込んだりしていませんか？
大丈夫、安心してください。今日ご紹介する`:read-write`（リード・ライト）疑似クラスを使えば、そんなモヤモヤが一発で解決します。難しそうな名前をしていますが、中身を知れば「なぁんだ、そういうことか！」と味方にしたくなる便利なやつですよ。
さっそく、一緒に紐解いていきましょう！
—
1. `:read-write` ってどんな子？（身近な例えでお話しします）
突然ですが、街で見かける「鍵のかかった掲示板」と、誰もが自由に書き込める「ホワイトボード」を思い浮かべてみてください。
- 鍵のかかった掲示板（読み取り専用）： 眺めることはできるけど、勝手に文字を書き換えたり消したりはできませんよね。
- ホワイトボード（編集可能）： ペンを持って、自由に文字を書いたり消したりできますよね。
Webの世界でも同じです。ユーザーが文字を入力したり編集したりできる「ホワイトボード」のような入力欄もあれば、システム側から「ここはいじっちゃダメですよ！」とロックされている「掲示板」のような入力欄もあります。
この `:read-write` は、日本語に直すと「読めるし、書ける（編集できる）」という意味。つまり、Webページの中で「いま、ユーザーが自由に文字を入力できる状態にあるフォーム部品」を、ピンポイントで探し出して捕まえてくれるCSSの仕組みなんです。
—
2. なぜ `:read-write` が必要になるの？
「入力欄のスタイルなんて、`` に直接クラスをつければいいじゃない？」って思いますよね。その通り、普段はそれで十分です。
でも、実際のWebサイトではこんなシーンに出くわします。
1. 会員登録の入力画面で、「今は入力できる状態だよ」ということをユーザーに優しく伝えるために、ふわっと光るようなエフェクトをつけたい。
2. でも、何かの拍子に「ここは編集しちゃダメです（読み取り専用）」と切り替わった時には、そのエフェクトを消したい。
もし `:read-write` を知らないと、JavaScriptを使ってわざわざ「あ、今入力できる状態に変わったから、CSSのクラスを追加して……」と面倒なコードを書くことになります。
しかし、この `:read-write` を使えば、「ユーザーが編集できる状態のときだけ、勝手にCSSを適用してね」と、ブラウザにお願いできちゃうんです。めっちゃ楽になりませんか？
—
3. 実践！コードで動きを確認してみよう
百聞は一見にしかず。実際にエディタに貼り付けて試せるコードを用意しました。
今回は、「自由に入力できる欄」と、「システム側からお触り厳禁（読み取り専用）にされている欄」を並べてみます。
:read-write 疑似クラスの実験場
下の2つの入力欄を見比べてみてください。
画面を見てみましょう
ブラウザでこのファイルを開くと、1つ目の「お名前」欄には青い枠線やふんわりした影がついているのに、2つ目の「会員ID」欄は、`readonly`属性がついているおかげで、その魔法がかからず、ごく普通の落ち着いた見た目になっているはずです。
JavaScriptを1行も書かなくても、ブラウザが属性（`readonly`があるかないか）を勝手に判断して、デザインを切り替えてくれる――これが `:read-write` の真骨頂です。
—
4. つまずきやすいポイントと、実務でのアドバイス
初心者の頃、私がよくやってしまった「落とし穴」をシェアしておきますね。
Q. ``（複数行の入力欄）にも効くの？
A. はい、もちろん効きます！
`` だけでなく、お問い合わせフォームなどでよく使う `