我一直在尝试使用css伪类和伪元素,我发现了一些我无法解决的问题.
考虑以下html输入字段：
<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" /><span></span>
为了达到3种状态：空,有效和无效.我正在使用:: after伪元素(应用于与输入相邻的跨度)以在字段的值有效时添加复选标记,并在值无效时添加X.
我正在使用伪类：valid和：invalid,似乎当输入字段为空(value =“”)时,其状态也是有效的.
有问题的CSS如下：
.v3_forms input[value=""] + span::after {
content: "";
}
.v3_forms input:valid + span::after {
content: "\2713";
color: limegreen;
}
.v3_forms input:invalid + span::after {
content: "X";
color: #ce0000;
}
对于我能够告诉的,在清除浏览器中的值之后,第二个css规则优先,即使特异性相同.
我在这里测试了选择器：specificity calculator并且似乎属性和伪类具有相同的权重.
解决方法
默认情况下,空字符串是有效值：
User agents should allow the user to set the value to the empty
string *.
.v3_forms input[value=""] + span::after {
content: "";
}
.v3_forms input:valid + span::after {
content: "\2713";
color: limegreen;
}
.v3_forms input:invalid + span::after {
content: "X";
color: #ce0000;
}
<div class="v3_forms"> <input type="number" value="1" min="1" max="1000" step="1" pattern="\d" required /><span></span> </div>
这解决了您问题中的具体示例,但对于任何< input />都是如此.接受用户输入的元素.
*参见whatwg参考.
