--- title: ':required' slug: 'Web/CSS/:required' tags: - CSS - Layout - Pseudo-class - Reference - Selector - Web translation_of: 'Web/CSS/:required' ---
{{ CSSRef }}

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

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

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

注: {{cssxref(":optional")}} 擬似クラスは任意のフォーム欄を選択します。

構文

{{csssyntax}}

例

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

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;
}

結果

{{EmbedLiveSample('Examples', 600, 120)}}

アクセシビリティの考慮

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

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

仕様書

仕様書 状態 備考
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }} {{ Spec2('HTML WHATWG') }} 変更なし。
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }} {{ Spec2('HTML5 W3C') }} HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }} {{ Spec2('CSS4 Selectors') }} 変更なし。

ブラウザーの互換性

{{Compat("css.selectors.required")}}

関連情報