输入框为空时是否有效？

Question

我一直在尝试使用CSS伪类和伪元素，但是我发现了一些问题，一直无法解决。

考虑以下HTML输入字段：

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

为了实现空、有效和无效三种状态，我使用::after伪元素（应用于输入框相邻的span元素）在字段值有效时添加一个勾号，在字段值无效时添加一个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规则具有优先权，尽管特异性相同。
我在这里测试了选择器：特异性计算器，似乎属性和伪类具有相同的权重。

- jnkrois

---

我认为如果你想禁止空值，就需要使用 required 属性进行标记。不过，我需要查看规范才能确定。 - Tieson T.

是的，你可以在这里看到它的实际效果：https://css-tricks.com/almanac/selectors/v/valid/ - Deryck

关于您的特定性问题：相同特定性的匹配规则按照它们在源中出现的顺序应用，即最后一条规则可以覆盖先前规则的属性。 - Ulrich Schwarz

Answer 1

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

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

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

.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参考文献。

- Tieson T.