:required
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:required
は CSS の 擬似クラスで、 <input>
, <select>
, <textarea>
要素のうち required
属性が設定されているものを表します。
css
/* 必須の <input> をすべて選択 */
input:required {
border: 1px dashed red;
}
試してみましょう
この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。
メモ: :optional
擬似クラスは省略可能なフォーム欄を選択します。
構文
:required
例
必須フィールドの枠を赤にする
HTML
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
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;
}
結果
アクセシビリティの考慮
仕様書
Specification |
---|
HTML Standard # selector-required |
Selectors Level 4 # opt-pseudos |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 他の検証関連の擬似クラス:
:optional
,:invalid
,:valid
- フォームデータの検証