css - 输入 :valid triggered even if it isn't valid

Question

我制作了一个 Material Design 表单，但 input:valid 无法正常工作。所以标签应该在表单中但是如果 :focus 或 if :valid 标签应该向上移动并改变字体大小

.link-input input:focus ~ label, 
.link-input input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #5264AE; }

如果我删除

.link-input input:valid ~ label

从上面的语法来看，:focus 工作得很好。

这是 jsfiddle 上的例子 https://jsfiddle.net/onjpeo7g/1/

Answer 1

问题是，输入将空字段视为有效输入。

所以改变你的选择器:

body .page .content .generator-box .link-input input:focus ~ label,
body .page .content .generator-box .link-input input:valid ~ label

收件人:

body .page .content .generator-box .link-input input:focus ~ label,
body .page .content .generator-box .link-input input:valid:not(:empty) ~ label

Updated Fiddle