:optional

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.

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

尝试一下

这个伪类很有用,可以为不是必须提交的表单字段设置样式。

备注: :required 伪类选择必填表单字段

语法

css
:optional {
  /* ... */
}

示例

可选字段具有紫色边框

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:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

结果

无障碍考虑

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

此外,还应在视觉上指示必填输入,通常使用描述性文本和/或图标,以避免仅依赖于颜色来传达含义。

规范

Specification
HTML
# selector-optional
Selectors Level 4
# optional-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
:optional

Legend

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

Full support
Full support

参见