:checked、:disabledとフォーム状態の疑似クラス
checked、disabled、requiredなど、インタラクティブな状態に応じてフォーム要素をスタイル設定します。
「:checked、:disabledとフォーム状態の疑似クラス」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
フォーム状態の擬似クラスの概要
CSS には、HTML フォーム要素の状態を反映する擬似クラスが用意されています。これにより、JavaScript を使わずにフォームコントロールを CSS だけでスタイル設定できます。
:checked
:checked は、チェックボックスやラジオボタンが選択されているとき、および select 内の <option> 要素が選択されているときに適用されます。
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
カスタムチェックボックスでの :checked
:checked ハックでは、ネイティブの input を非表示にし、:checked によって隣接兄弟セレクターを動作させてカスタムボックスをスタイル設定します：
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled と :enabled
:disabled は disabled 属性を持つフォーム要素を選択します。:enabled は操作できる要素を選択します。
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required と :optional
:required は required 属性を持つ入力を選択します。:optional はその属性を持たない入力を選択します。
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid と :invalid
:valid と :invalid は、type、pattern、min/max、required の制約に基づくブラウザー標準のフォーム検証状態を反映します。
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid と :user-invalid
ブラウザーによる検証は、ユーザーが操作する前でもページの読み込み時にすぐ実行されます。:user-valid と :user-invalid は、ユーザーがフィールドを操作した後にのみ適用されるため、UX が大幅に向上します。
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown は、入力がプレースホルダーテキストを表示しているとき、つまりフィールドが空のときに適用されます。JavaScript を使わずに空の入力を検出するために使用できます。
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only と :read-write
:read-only は readonly 属性を持つ入力を選択します。:read-write は編集可能な入力を選択します。
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate は、中間状態（チェック済みでも未チェックでもない状態で、JavaScript によって設定されます）のチェックボックス、およびグループ内でまだ選択されていないラジオボタンに適用されます。
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range と :out-of-range
type="number" または type="range" の入力に min/max が設定されている場合、:in-range と :out-of-range は、現在の値がその範囲に対して有効かどうかを反映します。
<input type="number" min="1" max="10" value="15" />
確認問題
ユーザーが入力フィールドを操作した後にのみ、フォーム検証のスタイルを適用する擬似クラスはどれですか？
まとめ
CSS のフォーム状態擬似クラスは、JavaScript を使わずに、ネイティブフォームの検証状態や操作状態を反映します。:checked、:disabled、:required、:valid、:invalid などがあります。より良い UX のため、:invalid よりも :user-invalid を優先してください。空のフィールドを検出するには :placeholder-shown を使用します。
よくある質問
「:checked、:disabledとフォーム状態の疑似クラス」レッスンは無料ですか？
はい。「:checked、:disabledとフォーム状態の疑似クラス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「:checked、:disabledとフォーム状態の疑似クラス」で何を学びますか？
checked、disabled、requiredなど、インタラクティブな状態に応じてフォーム要素をスタイル設定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「:checked、:disabledとフォーム状態の疑似クラス」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- :hover :focus :activeと:visited
- :nth-childと:nth-of-type
- :not()、:is()、:where()
- :checked、:disabledとフォーム状態の疑似クラス