因此，对于我的常规输入type=“text”字段，我使用以下代码将颜色更改为绿色，只有在键入了一些内容并且它是有效的之后:
input[type="text"]:not(:placeholder-shown):valid {
background-color: green;
}
对于输入type=“date”字段有没有同样的方法？
<input type="date" class="form-control calender-black" name="dbfield52">
问题似乎是它已经是有效的，因为它显示:DD-MM-YYYY作为标准值。
有没有一种方法可以用只使用css的选择器来做到这一点？ 或者使用JavaScript。
您可以使用:validcss伪类轻松完成此操作，如:
input[type="date"]:valid {
border: 2px solid green;
}
演示:
（只需从控件中选择一个值，它将向日期控件添加一个绿色边框）
null
/* This is just used to set some styling */
input[type="date"] { padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;border: 2px solid #ced4da; }
input[type="date"]:focus { outline: 0; }
/* This is the important part */
input[type="date"]:valid {
border: 2px solid green;
}<form>
<input type="date" class="form-control calender-black"
name="dbfield52" required /><br/>
<p>
<button>Submit</button>
</p>
</form>
您必须将输入设置为required，以便验证工作:
null
input[type="date"]:valid {
background-color: green;
}<input type="date" class="form-control calender-black" name="dbfield52" required>