:required

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:required CSS 伪类表示任何设置了 required 属性的 <input><select><textarea> 元素。

尝试一下

这个伪类很有用,可以突出显示在提交表单之前必须具有有效数据的字段。

备注: :optional 伪类选择可选表单字段。

语法

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

结果

无障碍考虑

必填的 <input> 应该应用 required 属性。这将确保使用辅助技术(例如屏幕阅读器)导航的人能够了解哪些输入需要有效内容以确保成功提交。

如果表单还包含可选输入,则不应仅仅依赖于颜色这一种传达意义的方式在视觉上指示必填输入。通常还应使用描述性文本和/或图标。

规范

Specification
HTML
# selector-required
Selectors Level 4
# required-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:required

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见