View in English Always switch to English

:invalid

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

:invalid 是 CSS 伪类选择器,用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素。

尝试一下

label {
 display: block;
 margin-top: 1em;
}
input:invalid {
 background-color: ivory;
 border: none;
 outline: 2px solid red;
 border-radius: 5px;
}

<form>
 <label for="email">Email Address:</label>
 <input id="email" name="email" type="email" value="na@me@example.com" />
 <label for="secret">Secret Code: (lower case letters)</label>
 <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
 <label for="age">Your age: (18+)</label>
 <input id="age" name="age" type="number" value="5" min="18" />
 <label
 ><input name="tos" type="checkbox" required checked /> - Do you agree to
 ToS?</label
 >
</form>

该伪类选择器可用于突出显示用户的字段错误。

语法

css

:invalid {
 /* ... */
}

示例

使用颜色标识元素以显示验证结果

HTML

html

<form>
 <div class="field">
 <label for="url_input">输入一个 URL:</label>
 <input type="url" id="url_input" />
 </div>
 <div class="field">
 <label for="email_input">输入一个电子邮件地址:</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:invalid {
 background-color: #ffdddd;
}
form:invalid {
 border: 5px solid #ffdddd;
}
input:valid {
 background-color: #ddffdd;
}
form:valid {
 border: 5px solid #ddffdd;
}
input:required {
 border-color: #800000;
 border-width: 3px;
}
input:required:invalid {
 border-color: #c00000;
}

结果

[フレーム]

展示分阶段的表单部分

在这个例子中,我们使用 :invalid 以及后续兄弟选择器(~)来分阶段地展示一个表单,使得表单最初只显示第一个完成的项目,当用户完成每一个项目时,表单会显示下一个项目。当整个表单完成后,用户可以提交它。

HTML

html

<form>
 <fieldset>
 <label for="form-name">姓名</label><br />
 <input type="text" name="name" id="form-name" required />
 </fieldset>
 <fieldset>
 <label for="form-email">电子邮件</label><br />
 <input type="email" name="email" id="form-email" required />
 </fieldset>
 <fieldset>
 <label for="form-message">信息</label><br />
 <textarea name="message" id="form-message" required></textarea>
 </fieldset>
 <button type="submit" name="send">提交</button>
</form>

CSS

css

/* 在无效的字段集后隐藏该字段集: */
fieldset:invalid ~ fieldset {
 display: none;
}
/* 在表单无效时,将按钮变暗并禁用它: */
form:invalid button {
 opacity: 0.3;
 pointer-events: none;
}
input,
textarea {
 box-sizing: border-box;
 width: 100%;
 font-family: monospace;
 padding: 0.25em 0.5em;
}
button {
 width: 100%;
 border: thin solid darkgrey;
 font-size: 1.25em;
 background-color: darkgrey;
 color: white;
}