View in EnglishAlways switch to English

: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月.

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

尝试一下

label {  display: block;  margin-top: 1em;}.req {  color: red;}*:required {  background-color: gold;}

<form>  <label for="name">Name: <span>*</span></label>  <input name="name" type="text" required />  <label for="birth">Date of Birth:</label>  <input name="birth" type="date" />  <label for="origin"    >How did you find out about us? <span>*</span></label  >  <select name="origin" required>    <option>Google</option>    <option>Facebook</option>    <option>Advertisement</option>  </select>  <p><span>*</span> - Required field</p></form>

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

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

语法

css

:required {  /* ... */}

示例

必填字段具有红色边框

HTML

html

<form>  <div>    <label for="url_input">Enter a URL:</label>    <input type="url" />  </div>  <div>    <label for="email_input">Enter an email address:</label>    <input type="email" 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;}