css – 2018年联系表格7的样式日期输入占位符

关于如何更改日期输入的dd / mm / yyyy占位符以及选择日期后具有不同颜色文本的非常直接的问题.

我尝试了以下代码无济于事：

input[type="date"] {
    color: pink;
}

::-webkit-datetime-edit-day-field[aria-valuetext=blank],
::-webkit-datetime-edit-month-field[aria-valuetext=blank],
::-webkit-datetime-edit-year-field[aria-valuetext=blank] {
  color: gren;
}

和

input[type="date"] {
    color: pink;
}

::-webkit-datetime-edit-day-field:not([aria-valuetext]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{
  color: green;
}

和

input[type="date"] {
    color: pink;
}

input[type="date"]:invalid::-webkit-datetime-edit-text,
input[type="date"]:invalid::-webkit-datetime-edit-day-field,
input[type="date"]:invalid::-webkit-datetime-edit-month-field,
input[type="date"]:invalid::-webkit-datetime-edit-year-field {
  color: green;
}

HTML

<span class="wpcf7-form-control-wrap date-457">
    <input type="date" name="date-457" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false">
</span>

这些样式都不适用于更改占位符并使所选日期具有不同的颜色.我想这些解决方案已经过时,因为我在这里找不到与2017-2018相关的任何答案.

我相信最新的答案将有利于网站上的每个人在今天和年龄寻找答案,所以请不要将其标记为重复,除非重复的问题提供了有效的代码.

有一种方法可以做到这一点,但它需要您将所需的属性添加到输入.然后,当他的值具有或不是有效格式时,您可以使用 :valid和 :invalid伪选择器来设置输入的样式.检查下一个示例,第一个只是在选择日期时将文本设为绿色,否则文本保持黑色：

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

<span class="wpcf7-form-control-wrap date-457">
    <input type="date" name="date-457" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" required>
</span>

下一个,与上一个类似,但在日期无效时添加红色文本,我们将鼠标悬停在输入上.

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

input[type="date"]:invalid:hover {
    color: red;
}

<span class="wpcf7-form-control-wrap date-457">
    <input type="date" name="date-457" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" required>
</span>

使用JQuery(并且没有必需属性)的最后一个替代方法(不仅仅是CSS)是在输入事件上使用侦听器并检查值以便操作输入的样式：

$("input[type='date']").on('input', function()
{
    $(this).css("color", "red");
    
    if ($(this).val())
        $(this).css("color", "green");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="wpcf7-form-control-wrap date-457">
    <input type="date" name="date-457" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false">
</span>