此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
:optional
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:optional CSS 伪类表示任何未设置 required 属性的 <input>、<select> 或 <textarea> 元素。
尝试一下
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:optional {
background-color: palegreen;
}
<form>
<label for="name">Name: <span class="req">*</span></label>
<input id="name" name="name" type="text" required />
<label for="birth">Date of Birth:</label>
<input id="birth" name="birth" type="date" />
<label for="origin"
>How did you find out about us? <span class="req">*</span></label
>
<select id="origin" name="origin" required>
<option>Google</option>
<option>Facebook</option>
<option>Advertisement</option>
</select>
<p><span class="req">*</span> - Required field</p>
</form>
这个伪类很有用,可以为不是必须提交的表单字段设置样式。
备注::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 |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.