Question

我有一个表单，其中所有表单输入都是required。我想突出显示第一个输入无效，或者更确切地说，没有填写。我想我可以将first-of-type伪选择器与invalid伪选择器一起使用，但是只要我填写了第一个输入，选择器不会定位未填写的下一个表单输入。下面是我的代码......

这是我的CSS规则，用于定位第一个无效输入。

input:invalid:first-of-type { border: 3px blue solid; }

这是我的表格：

<form>
    <legend>Sign Up Info</legend>
    <fieldset>      
        <label>First Name</label><br>
        <input required type="text"><br>
        <label>Last Name</label><br>
        <input required type="text"><br>
        <label>Address</label><br>
        <input required type="text"><br>
    </fieldset>        
</form>

我想用CSS完全实现这一点，因为我真的想简化我的Javascript并将任何可以由CSS处理的东西移到样式表中。

Answer 1

首先编写一条突出显示无效条目的规则：

input:invalid { border: 3px blue solid; }

然后，写一条规则，说明无效的输入将不突出显示：

input:invalid ~ input { border: 0; }

如您所见，您的规则

input:invalid:first-of-type { border: 3px blue solid; }

不起作用，因为它只突出显示第一个输入，如果它无效。

仅使用CSS突出显示第一个无效表单输入

1 个答案: