Czy można ustawić domyślny tekst zastępczy na elemencie wejściowym HTML5 = "date"? w Chrome?

Question

Mam formularz z listą dat na nim i używam elementu HTML 5 input type="date" do ich reprezentowania. Chciałbym zmienić kolor pól, które nie mają wartości (tj. Te, które pokazują dd/mm/yyyy), aby łatwiej było je odróżnić od pól zawierających faktyczną datę.

Czy to możliwe? Pomyślałem, że mogłem zrobić to, co chcę, ale wygląda na to, że nie.

Answer 1

W danych wejściowych do daty w przeglądarce Chrome nie ma elementu zastępczego. Jeśli zaznaczysz "Pokaż cień DOM" w ustawieniach DevTools', będziesz mógł go sprawdzić:

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

Można projektować oddzielne elementy używając ich pseudos (działa w Chrome Canary):

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

Answer 2

- Atrybut placeholder nie jest obecnie obsługiwany przez pola wejściowe z type="date" i dlatego nie może być stylizowany. Spójrz na tej liście ważnych atrybutów:

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

Więc Chrome faktycznie robi to dobrze w przeciwieństwie do Safari, który nie dba o date -type w ogóle.

Answer 3

Dzięki istniejącym odpowiedziom udało mi się go rozwiązać. Pola dnia i roku tylko otrzymują atrybut aria-valuetext, gdy pole daty ma wartość. Oznacza to, że można projektować te wartości, gdy pole data na pokazując swoją wartość domyślną tak:

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

Answer 4

Począwszy od Chrome 31 (ewentualnie wcześniej), aria-Tekstwartoœci jest „pusty” zamiast null. Jeden z następujących pracach

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

zamiast:

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

(nie mam rep uwag na właściwej odpowiedzi)

Answer 5

chciałem „zastępczy” tekst będzie szary. Na podstawie odpowiedzi użytkownika @ JackBradford używam:

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