We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 の定義
勧告案 疑似クラスとして定義、但し意味論との結び付けはなし。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応10 あり410105
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応4.4.4 ? あり4105 ?

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,