:required

**:required** CSS 伪类 代表任何具有 <input>、<select> 或 <textarea> 元素的 required 属性设置在其上。

试一试

此伪类对于突出显示必须具有有效数据的字段很有用，这样表单才能提交。

**注意：** :optional 伪类选择可选表单字段。

语法

css
:required {
  /* ... */
}

无障碍

强制性 <input> 应该应用 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;
}

结果

规范

规范
HTML 标准
# selector-required
选择器级别 4
# opt-pseudos

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅