如何设置联系人表单7的日期输入占位符的样式

Question

如何更改日期输入的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年有关的答案。

Answer 1

有一种方法可以做到这一点，但需要将required属性添加到input。然后，当输入的值具有或不具有有效格式时，可以使用：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事件上使用侦听器并检查值以操纵输入的样式：

$("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>

Answer 2

根据您的问题，我理解您希望在选择日期后更改日期的颜色。我建议使用JQuery，但我知道你只标记了CSS。

使用JQuery方法change()可以很容易地实现您想要的内容。我还为您的日期字段添加了一个ID，这样我们就可以在设置日期时使用getElementById来更改CSS。

此外，当您单击"取消"按钮时，日期颜色可以更改为其他颜色或返回到原始颜色。在这个例子中，我把它设置为红色

其想法是，当日期字段不为空时，它将显示绿色。当日期为空时，它将显示另一种颜色(在本例中为红色，您可以选择将其设置回原始颜色。我这样做是为了让您在不为空时看到绿色，在为空时可以看到红色(。

因此，当字段不为空时，表示长度>0。使用这个想法，我们可以设置当日期字段不为空时，我们将其更改为绿色，当它为空时我们将其改为红色

试试这个：

$('#date').change(function()
{
if( $(this).val().length > 0 ) {
document.getElementById("date").style.color = "green"; 	
} else {
	document.getElementById("date").style.color = "red";
}
});

<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" id="date">
</span>

ps：如果你不想在JQuery中得到答案，请告诉我，我会删除这个答案。

Answer 3

您希望在选择日期时更改颜色。没错！我是这样理解的。你可以检查一下铬。

input[type="date"] {
color: pink;
}
::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-year-field:focus {
color:green;
background:transparent;
}

<input type="date" name="date-457" value="" aria-invalid="false">