Question

我一直在尝试使用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并且似乎属性和伪类具有相同的权重。

Answer 1

默认情况下，空字符串是有效值：

用户代理应该允许用户将值设置为空字符串*。

如果您想要字段值，则需要添加required属性：

＆＃13;

.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;
}

＆＃13;

<div class="v3_forms">
<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" required /><span></span>
</div>

＆＃13;

这解决了您问题中的具体示例，但对于接受用户输入的任何<input />元素，情况也是如此。

*请参阅whatwg参考。

输入字段是否为空时是否有效？

1 个答案: