在有效输入上更改输入类型日期的颜色答案

【问题标题】：Changing color of input type date on valid input在有效输入上更改输入类型日期的颜色
【发布时间】：2020-06-22 11:57:37
【问题描述】：

所以对于我的常规输入 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。

【问题讨论】：

请同时展示如何将日历绑定到输入。我相信你在 JQuery 中做到了

标签： javascript css

【解决方案1】：

您可以使用:valid css 伪类轻松做到这一点：

input[type="date"]:valid {
  border: 2px solid green;
}

演示：
_{（只需从控件中选择一个值，它就会为日期控件添加一个绿色边框）}

/* 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>

【讨论】：

【解决方案2】：

您必须将输入设置为 required 才能进行验证：

input[type="date"]:valid {
  background-color: green;
}

&lt;input type="date" class="form-control calender-black" name="dbfield52" required&gt;

【讨论】：

谢谢！问题是，不应要求日期字段。无论如何都不需要css吗？
我不知道。你可能不得不改用 JS
我怕那个，那就用JS吧。谢谢！ :)