如果输入了某些值，则当用户将注意力从输入中移出时，如何显示输入类型= "date"的值

Question

我试图用color: white来解决问题的第一部分，这使得它隐藏在眼睛里。

在第一次输入中可以看到，当它聚焦时，color变为lightblue，当输入某些值(也可以是空格)时，color变为blue。如果没有输入任何值，color将变回原来的值。

那么color的第一部分和最后一部分变化也发生在第二个输入(type="date")中，即，当焦点更改为lightblue时，onfocus out更改回原始颜色。

但是我想在第二也有相同的功能，即，如果一些值(date)被输入labelcolor更改为blue和inputcolor仍然是black。这在CSS中可能吗?就像在第一个input

input:focus~label {
color: lightblue;
}
input:not(input[type="date"]):not(:placeholder-shown)~label {
color: blue;
}
input[type="date"] {
color: white;
}
input[type="date"]:focus {
color: black;
}

<div>
<input type="text" name="firstName" id="firstName" placeholder=" " required>
<label for="firstName">First Name</label>
</div>
<br><br><br>
<div>
<input type="date" name="birth" id="birth" placeholder=" " required>
<label for="birth" class="birthLabel">Birthday</label>
</div>

编辑:因为期望的行为是通过使用:valid实现的，但只有当input有required或一些模式匹配时才有可能。所以不可能总是这样那么当这些(required)不在input

上时还有其他的解决方法吗?

Answer 1

检查是否有效

input[type="date"]:valid~label {
color: blue;
}

input:focus~label {
color: lightblue;
}
input:not(input[type="date"]):not(:placeholder-shown)~label {
color: blue;
}
input[type="date"] {
color: white;
}
input[type="date"]:focus {
color: black;
}
input[type="date"]:valid~label {
color: blue;
}
input[type="date"]:valid {
color: black;
}

<div>
<input type="text" name="firstName" id="firstName" placeholder=" " required>
<label for="firstName">First Name</label>
</div>
<br><br><br>
<div>
<input type="date" name="birth" id="birth" placeholder=" " required>
<label for="birth" class="birthLabel">Birthday</label>
</div>