CSS `:required` 擬似クラス

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

試してみましょう

label {
 display: block;
 margin-top: 1em;
}
.req {
 color: red;
}
*:required {
 background-color: gold;
}

<form>
 <label for="name">名前: <span class="req">*</span></label>
 <input id="name" name="name" type="text" required />
 <label for="birth">生年月日:</label>
 <input id="birth" name="birth" type="date" />
 <label for="origin"
 >どうやって見つけましたか? <span class="req">*</span></label
 >
 <select id="origin" name="origin" required>
 <option>Google</option>
 <option>Facebook</option>
 <option>広告</option>
 </select>
 <p><span class="req">*</span> - 必須フィールド</p>
</form>

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

メモ: :optional 擬似クラスは省略可能なフォーム欄を選択します。

構文

css

:required {
 /* ... */
}

アクセシビリティ

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

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

例

必須フィールドの枠を赤にする

HTML

html

<form>
 <div class="field">
 <label for="url_input">URL を入力:</label>
 <input type="url" id="url_input" />
 </div>
 <div class="field">
 <label for="email_input">メールアドレスを入力:</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: maroon;
 border-width: 3px;
}
input:required:invalid {
 border-color: #c00000;
}