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

从您的问题中得知，您希望在选择日期后更改其颜色。我建议使用JQuery，但我确实了解您仅标记了CSS。

使用JQuery方法change()可以轻松实现所需的目标。我还为您的日期字段添加了ID，以便我们在设置日期后可以使用getElementById来更改CSS。

此外，当您单击取消按钮时，日期颜色可以更改为另一种颜色或返回其原始颜色。在此示例中，我将其设置为红色。

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

因此，如果该字段不为空，则表示长度>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 2

您要在选择日期时更改颜色。没错！我理解那样。您可以检查Chrome。

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

Answer 3

有一种方法可以执行此操作，但是需要将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>

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

3 个答案: