Возможно ли стиль текста заполнителя по умолчанию на элементе ввода HTML5 = "дата"? в Chrome?

У меня есть форма со списком дат, и я использую элемент HTML 5 input type="date" для их представления. Я хотел бы изменить цвет полей, которые не имеют значения (т.е. Те, которые показывают dd/mm/yyyy), так что их легче отличить от полей, содержащих фактическую дату.

Возможно ли это? Я думал, что -webkit-input-placeholder мог бы сделать то, что я хочу, но это не так.

Ответы

Ответ 1

В Chrome отсутствует запись для ввода даты. Если вы установите флажок "Show shadow DOM" в настройках devtools, вы сможете проверить его:

<input type="date">
  #document-fragment
    <div dir="ltr" pseudo="-webkit-date-and-time-container">
      <div pseudo="-webkit-datetime-edit">
      <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
      <div></div>
      <div pseudo="-webkit-calendar-picker-indicator"></div>
    </div>
</input>

Вы можете создавать отдельные элементы, используя свои псевдонимы (работает в Chrome Canary):

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

Ответ 2

Благодаря существующим ответам мне удалось его обработать. В дневных месяцах и году поля получают атрибут aria-valuetext, когда поле даты имеет значение. Это означает, что я могу стилизовать эти значения, когда поле даты показывает его значение по умолчанию следующим образом:

::-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: #999;
}

Ответ 3

Как и в случае с Chrome 31 (возможно, ранее), aria-valuetext является "пустым", а не нулевым. Любая из следующих работ

::-webkit-datetime-edit-year-field[aria-valuetext=blank]
::-webkit-datetime-edit-year-field:not([aria-valuenow])

а не:

::-webkit-datetime-edit-year-field:not([aria-valuetext])

(У меня нет ответа, чтобы прокомментировать соответствующий ответ)

Ответ 4

Я хотел, чтобы текст "placeholder" был серым. Основываясь на ответе @JackBradford, я использую:

::-webkit-datetime-edit-text, /* this makes the slashes in dd/mm/yyyy grey */
::-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: lightgrey;
}

Ответ 5

В настоящее время атрибут placeholder не поддерживается полями ввода с type="date" и поэтому не может быть оформлен в стиле. Взгляните на этот список допустимых атрибутов:

w3.org: "input type = date - date input control"

Итак, Chrome на самом деле делает это правильно, в отличие от Safari, который вообще не заботится о типе date.