Стиль ввода даты заполнителя для контактной формы 7 в 2018 году

Довольно простой вопрос о том, как изменить местозаполнитель 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.

Я полагаю, что актуальный ответ будет полезен всем на сайте, которые ищут ответ в текущий день и возраст, поэтому, пожалуйста, не отмечайте его как дубликат, ЕСЛИ дубликат вопроса не содержит рабочий код.

Источник

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>

Последняя альтернатива (не только 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>

Источник

Вы хотите изменить цвет при выборе даты. Это правильно! Я так понимаю. Вы можете проверить на хром.

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

Источник

Из вашего вопроса я понимаю, что вы хотите изменить цвет даты после ее выбора. Я предлагаю использовать JQuery, однако я понимаю, что вы пометили только CSS.

Вы можете легко достичь желаемого с помощью метода JQuery change(), Я также добавил идентификатор для вашего поля даты, чтобы мы могли использовать 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, дайте мне знать, и я удалю этот ответ.

Источник
Другие вопросы по тегам