:requiredは、フォーム要素が必須（required属性が指定されている）状態の要素に対して適用されるスタイルを指定する擬似クラスです。
ユーザーが必ず入力しなければならないフォーム要素に対して特別なスタイルを与える際に利用します。
:requiredの値とその効果の一覧
:required: フォーム要素が必須の場合に適用されるスタイルを指定します。
注意点と関連情報
:requiredは、input、textarea、selectなど、フォーム要素に対して使用されます。
この擬似クラスは、要素にrequired属性がある場合のみ適用され、必須入力を視覚的に示すために利用されます。
:requiredが効かない理由として考えられること
対象の要素がフォーム要素でない
:requiredは、<input>や<textarea>、<select>などのフォーム要素に対してのみ適用されます。これら以外の要素には適用されません。
対策：対象の要素がフォーム要素であり、required属性が設定されていることを確認します。フォーム以外の要素には、別のCSSセレクタや擬似クラスを使用する必要があります。
required属性が設定されていない
:requiredは、required属性が設定された要素にのみ適用されます。required属性が設定されていないフォーム要素には、この擬似クラスは機能しません。
対策：フォーム要素にrequired属性が正しく設定されているか確認します。例：<input type="text" required>のように、required属性を付与します。
disabled属性が設定されている
フォーム要素にdisabled属性が設定されている場合、その要素は無効化され、:requiredが適用されません。disabledとrequiredは併用できません。
対策：対象のフォーム要素にdisabled属性が設定されていないか確認し、requiredとdisabledを正しく使い分けるようにします。
表示例
CSS:required
以下の例では、必須フィールドに対して背景色を淡いオレンジにし、ボーダーを太いオレンジ色に変更し、テキストの色も濃いオレンジ色に変更します。
HTMLコード
<div class="css-sample-container">
<input type="text" class="css-sample-input css-sample-required" placeholder="必須項目" required>
<input type="text" class="css-sample-input css-sample-required" placeholder="任意項目">
</div>
CSSコード
.css-sample-required:required {
background-color: #fff3e0;
border: 2px solid #ff9800;
color: #e65100;
}
表示結果
まとめ
- :requiredは、フォーム要素が必須の場合にスタイルを適用するために使用します。
- 主に
inputやtextarea、selectなどに適用されます。 - 必須フィールドに特別な視覚的スタイルを提供し、ユーザーが入力を忘れないようにするために役立ちます。