क्या एचटीएमएल 5 इनपुट प्रकार = "दिनांक" तत्व पर डिफ़ॉल्ट प्लेसहोल्डर पाठ को स्टाइल करना संभव है? क्रोम में?

Question

मेरे पास तिथियों की एक सूची के साथ एक फॉर्म है और मैं उनका प्रतिनिधित्व करने के लिए एचटीएमएल 5 input type="date" तत्व का उपयोग कर रहा हूं। मैं उन फ़ील्ड का रंग बदलना चाहता हूं जिनके पास मूल्य नहीं है (यानी वे dd/mm/yyyy दिखाते हैं) ताकि वे वास्तविक तिथि वाले फ़ील्ड से अधिक आसानी से भिन्न हो सकें।

क्या यह संभव है? मैंने सोचा कि -webkit-input-placeholder मैंने जो किया है वह हो सकता है, लेकिन ऐसा नहीं लगता है।

Answer 1

क्रोम में दिनांक इनपुट में कोई प्लेसहोल्डर नहीं है। आप "शो छाया डोम" 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> 

आप अपने pseudos (क्रोम कैनरी में काम करता है) का उपयोग कर अलग तत्वों शैली कर सकते हैं:

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

Answer 2

placeholder-वर्तमान में type="date" के साथ इनपुट फ़ील्ड द्वारा समर्थित नहीं है और इसके लिए स्टाइल नहीं किया जा सकता है। वैध विशेषताओं की इस सूची पर एक नज़र डालें:

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

तो क्रोम वास्तव में यह सही सफारी, जिस पर सभी date प्रकार की परवाह नहीं है के विपरीत में कर रही है।

Answer 3

मौजूदा उत्तरों के लिए धन्यवाद, मैंने इसे काम करने में कामयाब रहे। दिन के महीने और साल के फ़ील्ड केवल 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; 
} 

Answer 4

क्रोम 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]) 

Answer 5

मैं होने के लिए "प्लेसहोल्डर" पाठ चाहता था (मैं प्रतिनिधि प्रासंगिक जवाब पर टिप्पणी करने से नहीं है) ग्रे। @ 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; 
}