Ist es möglich, den Standardplatzhaltertext auf einem HTML5-Eingabetyp = "date" -Element zu formatieren? in Chrome?

Question

Ich habe ein Formular mit einer Liste von Daten darauf und ich verwende das HTML 5 Element, um sie darzustellen. Ich möchte die Farbe der Felder ändern, die keinen Wert haben (d. H. Diejenigen, die dd/mm/yyyy anzeigen), damit sie einfacher von den Feldern unterschieden werden können, die ein tatsächliches Datum enthalten.

Ist das möglich? Ich dachte, dass -webkit-input-placeholder könnte getan haben, was ich will, aber es scheint nicht.

Answer 1

In einem Datumseintrag in Chrome ist kein Platzhalter vorhanden. Wenn Sie in devtools' Einstellungen "Show Schatten DOM" zu überprüfen, werden Sie in der Lage sein, um es zu inspizieren:

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

können Sie einzelne Elemente stylen ihre pseudos mit (funktioniert in Chrome Canary):

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

Answer 2

Das placeholder -Attribut wird derzeit nicht von Eingabefeldern mit type="date" unterstützt und kann daher nicht formatiert werden. Werfen Sie einen Blick auf diese Liste der gültigen Attribute:

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

So Chrome ist es eigentlich richtig im Gegensatz zu Safari zu tun, die nicht über die date Typ überhaupt nicht interessieren.

Answer 3

Dank der vorhandenen Antworten habe ich es geschafft, es auszuarbeiten. Die Tag Monat und Jahr Felder erhalten nur ein aria-valuetext Attribut, wenn das Datum Feld einen Wert hat. Das bedeutet, dass ich diese Werte stylen kann, wenn das Datumsfeld ist der Standardwert, wie dies zeigt:

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

Ab Chrome 31 (evtl. früher), Arie-Wertetext ist ‚leer‘ und nicht null. Entweder der folgenden Arbeit

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

statt:

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

(ich habe nicht die rep Kommentar auf der entsprechenden Antwort)

Answer 5

ich den „Platzhalter“ Text sein wollte grau. Basierend auf @ JackBradford Antwort, ich bin mit:

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