È possibile assegnare uno stile al testo segnaposto predefinito su un tipo di input HTML5 = elemento "date"? in Chrome?

Question

Ho un modulo con un elenco di date e sto utilizzando l'elemento HTML 5 input type="date" per rappresentarli. Mi piacerebbe cambiare il colore dei campi che non hanno un valore (ad esempio quelli che mostrano dd/mm/yyyy) in modo che siano più facilmente distinguibili dai campi che contengono una data effettiva.

È possibile? Ho pensato che -webkit-input-placeholder avrebbe potuto fare quello che voglio, ma non sembra.

Answer 1

Non c'è alcun segnaposto in una data di input in Chrome. Se si seleziona "Mostra ombra DOM" nelle impostazioni DevTools', si sarà in grado di visitarlo:

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

È possibile lo stile elementi separati usando i loro pseudos (funziona in Chrome Canary):

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

Answer 2

L'attributo placeholder non è attualmente supportato dai campi di immissione con type="date" e quindi non può essere stato formattato. Date un'occhiata a questa lista di attributi validi:

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

Così Chrome è in realtà facendo proprio in contrasto con Safari, che non si preoccupa della date tipo a tutti.

Answer 3

Grazie alle risposte esistenti sono riuscito a risolverlo. I campi giorno mese e anno ricevono solo un attributo aria-valuetext quando il campo data ha un valore. Questo significa che posso lo stile questi valori quando il campo data che mostra il suo valore di default in questo modo:

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

Come di Chrome 31 (forse anche prima), aria-valuetext è 'vuoto', piuttosto che nulla. Entrambi i seguenti lavori

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

piuttosto che:

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

(non ho il rappresentante di commentare la risposta corrispondente)

Answer 5

volevo il testo "segnaposto" per essere grigio. Sulla base di @ JackBradford risposta, sto usando:

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