Input selectors

概要

フォーム要素のインタラクション状態に応じたスタイリングを可能にする基本的な疑似クラスです。チェックされたチェックボックス、無効化されたボタン、有効な入力フィールドなどに対して視覚的なフィードバックを提供します。フォームのユーザビリティ向上に不可欠なセレクターです。

対応ブラウザ

基本構文

input:checked {
  accent-color: blue;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

実務での使いどころ

• フォーム要素の状態別スタイリング

  チェック済みのチェックボックスにアクセントカラーを適用し、無効化されたボタンをグレーアウトして操作不可であることを示します。

注意点

アクセシビリティ

• :disabledで視覚的に無効化された要素が、スクリーンリーダーでも正しく無効状態として認識されることを確認してください。

参考リンク

• MDN Web Docs — Input selectors