3

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

我相信最新的答案将使网站上在当今时代寻找答案的每个人都受益，因此请不要将其标记为重复，除非重复的问题提供了工作代码。

4

3 回答 3

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中的答案，请告诉我，我会删除这个答案。

于 2018-10-30T03:49:59.607 回答
2

你想在选择日期的时候改变颜色。没错！我是这样理解的。您可以检查铬。

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

于 2018-10-31T08:45:46.653 回答
2

有一种方法可以做到这一点，但需要您将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>

最后一种选择（不是仅 CSS），使用JQuery（并且没有必需的属性）是在事件上使用侦听器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-11-02T04:56:04.027 回答