:required
は CSS の 擬似クラスで、 <input>
, <select>
, <textarea>
要素のうち required
属性が設定されているものを表します。
/* 必須の <input> をすべて選択 */
input:required {
border: 1px dashed red;
}
この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。
注: :optional
擬似クラスは任意のフォーム欄を選択します。
構文
:required
例
必須フィールドの枠を赤にする
HTML
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input">
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required>
</div>
</form>
CSS
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
結果
アクセシビリティの考慮
入力が必須の <input>
には required
属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。
フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard :required の定義 |
現行の標準 | 変更なし。 |
HTML5 :required の定義 |
勧告 | HTML の意味論と制約検証を定義。 |
Selectors Level 4 :required の定義 |
草案 | 変更なし。 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 他の検証関連の擬似クラス:
:optional
,:invalid
,:valid
- フォームデータの検証