此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
:required
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月.
:required CSS 伪类表示任何设置了 required 属性的 <input>、<select> 或 <textarea> 元素。
尝试一下
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:required {
background-color: gold;
}
<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>
这个伪类很有用,可以突出显示在提交表单之前必须具有有效数据的字段。
备注:
: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 |
浏览器兼容性
Loading...