CSS在形式验证中的作用-DEV365 开发者社区

:valid选择器 - 选择具有根据元素设置验证的值的元素

:invalid选择器 - 选择具有无法按照元素设置验证的值的元素

两者都在表单输入元素上工作，例如

使用最小和最大的输入元素
通过法律电子邮件输入的电子邮件类型输入
具有数字值等的数字字段。

<style>
    * {
        box-sizing: border-box;
    }

    .html-validation {
        margin: auto;
        width: 30%;
        border: 1px solid green;
        box-shadow: 5px 5px 8px green;
        border-radius: 5px;
        padding: 20px;
    }

    label {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: block;
        text-align: center;
    }

    input {
        width: 100%;
        padding: 10px;
        margin: 10px 0px;
        border-radius: 10px;
    }

    input:invalid {
        border: 1px solid red;
    }

    input:valid {
        border: 1px solid green;
    }

</style>
<form class="html-validation" action="#0" method="post">
        <label for="firstName">First Name</label>
        <input name="firstName" type="text" required>
        <input type="submit">
</form>

输入变为有效或无效后，立即应用样式。

其他类似工作的CSS选择器很少：

:optional-选择表单上的所有不需要的元素，如果我们使用此选择器应用样式，则将其应用于表单中的所有可选元素。

:required-与可选的相反，并选择表格中的所有必需元素。

:in-range-选择带有值指定值的元素在该范围内 - 主要适用于最大和最小指定的输入元素。

:out-of-range-与范围对面。

:readonly-选择用ReadOnly属性指定的元素

:read-write-选择可读性和可写的元素。因此，没有提到残疾和可读。

:checked-选择所有检查元素。复选框和广播按钮，选项。

:hover-当用户徘徊在其上时，选择任何元素

:visited-使用用户单击并访问它时适用于链接。

:active-选择用户选择时。

:disabled-选择所有属性的所有元素，提到为禁用

:focus-选择集中元素

:empty-选择没有孩子的元素