:required

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

css

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

試してみましょう

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

<form>  <label for="name">Name: <span>*</span></label>  <input name="name" type="text" required />  <label for="birth">Date of Birth:</label>  <input name="birth" type="date" />  <label for="origin"    >How did you find out about us? <span>*</span></label  >  <select name="origin" required>    <option>Google</option>    <option>Facebook</option>    <option>Advertisement</option>  </select>  <p><span>*</span> - Required field</p></form>

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

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

構文

:required

例

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

HTML

html

<form>  <div>    <label for="url_input">Enter a URL:</label>    <input type="url" />  </div>  <div>    <label for="email_input">Enter an email address:</label>    <input type="email" 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;}