输入：即使有效也无效触发

Question

我已经制作了一个材料设计表格，但是输入：有效的并不是应该的方式。所以标签应该是格式，但如果：焦点或if：有效标签应向上移动并改变字体大小

.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