:required

CSS の :required 疑似クラスは、 required 属性が設定されている <input>, <select>, <textarea> 要素を表します。

/* 必須の <input> をすべて選択 */
input:required {
  border: 1px dashed red;
}

この疑似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

メモ: :optional 疑似クラスは任意のフォーム欄を選択します。

構文

:required

例

例は :invalid を参照してください。

アクセシビリティへの配慮

入力が必須の <input> には required 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
:required の定義		 現行の標準 変更なし。
HTML5
:required の定義		 勧告 HTML の意味論と制約の検証を定義。
Selectors Level 4
:required の定義		 草案 変更なし。
CSS Basic User Interface Module Level 3
:required の定義		 勧告 疑似クラスとして定義、但し意味論との結び付けはなし。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:requiredChrome 完全対応 10Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 10Safari 完全対応 5WebView Android 完全対応 4.4.3Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連項目

関連トピック
  1. CSS
  2. CSS リファレンス
  3. CSS Selectors
  4. ガイド
    1. セレクターでの :target 疑似クラスの利用
  5. プロパティ
    1. 選択子列挙
  6. 基本セレクター
    1. 要素型セレクター
    2. クラスセレクター
    3. ID セレクター
    4. 全称セレクター
    5. 属性セレクター
  7. 結合子
    1. 隣接兄弟結合子
    2. 一般兄弟結合子
    3. 子結合子
    4. 子孫結合子
    5. 列結合子
  8. 擬似クラス
    1. :active
    2. :any-link
    3. :checked
    4. :blank
    5. :default
    6. :defined
    7. :dir
    8. :disabled
    9. :empty
    10. :enabled
    11. :first
    12. :first-child
    13. :first-of-type
    14. :fullscreen
    15. :focus
    16. :focus-visible
    17. :focus-within
    18. :has()
    19. :host() [翻訳する]
    20. :host-context()
    21. :hover
    22. :indeterminate
    23. :in-range
    24. :invalid
    25. :is() (:matches(), :any())
    26. :lang
    27. :last-child
    28. :last-of-type
    29. :left
    30. :link
    31. :not()
    32. :nth-child()
    33. :nth-last-child()
    34. :nth-last-of-type()
    35. :nth-of-type()
    36. :only-child
    37. :only-of-type
    38. :optional
    39. :out-of-range
    40. :placeholder-shown
    41. :read-only
    42. :read-write
    43. :required
    44. :right
    45. :root
    46. :scope
    47. :target
    48. :valid
    49. :visited
    50. :where() [翻訳する]
  9. 擬似要素
    1. ::-moz-progress-bar
    2. ::-moz-range-progress [翻訳する]
    3. ::-moz-range-thumb [翻訳する]
    4. ::-moz-range-track [翻訳する]
    5. ::-ms-browse [翻訳する]
    6. ::-ms-check [翻訳する]
    7. ::-ms-clear
    8. ::-ms-expand
    9. ::-ms-fill
    10. ::-ms-fill-lower [翻訳する]
    11. ::-ms-fill-upper [翻訳する]
    12. ::-ms-reveal [翻訳する]
    13. ::-ms-thumb [翻訳する]
    14. ::-ms-ticks-after [翻訳する]
    15. ::-ms-ticks-before [翻訳する]
    16. ::-ms-tooltip [翻訳する]
    17. ::-ms-track [翻訳する]
    18. ::-ms-value
    19. ::-webkit-progress-bar [翻訳する]
    20. ::-webkit-progress-value [翻訳する]
    21. ::-webkit-slider-runnable-track [翻訳する]
    22. ::-webkit-slider-thumb [翻訳する]
    23. ::after (:after)
    24. ::backdrop
    25. ::before (:before)
    26. ::cue (:cue)
    27. ::cue-region [翻訳する]
    28. ::first-letter (:first-letter)
    29. ::first-line (:first-line)
    30. ::grammar-error
    31. ::marker
    32. ::part() [翻訳する]
    33. ::placeholder
    34. ::selection
    35. ::slotted()
    36. ::spelling-error