如何为 Contact Form 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>

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

Answer 1

根据您的问题，我了解到您想在选择日期后更改日期的颜色。我建议使用 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 2

你想在选择 date.It 时改变颜色，没错！我是这么理解的。您可以查看 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 and :invalid 伪选择器 为输入设置样式，无论其值是否具有有效格式。检查下一个例子，第一个只是在选择日期时使文本 green ，否则文本保持 black:

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>

如何为 Contact Form 7 设置日期输入占位符的样式

How to style the date input placeholder for Contact Form 7

html

css

contact-form-7