सीएसएस के साथ इनपुट के एचटीएमएल 5 प्लेसहोल्डर रंग को बदलना क्रोम

Question

पर काम नहीं करता है, मैंने निम्नलिखित विषय का पालन करने की कोशिश की, लेकिन असफल रहा। Change an HTML5 input's placeholder color with CSS

मैंने अपने प्लेसहोल्डर को रंगीन करने की कोशिश की, लेकिन यह अभी भी क्रोम 17.0.963.56 मीटर पर ग्रे रहती है।

एचटीएमएल

<input type='text' name='test' placeholder='colorize placeholder' value='' /> 

सीएसएस

INPUT::-webkit-input-placeholder, 
INPUT:-moz-placeholder { 
    color:red; 
} 
input[placeholder], [placeholder], *[placeholder] 
{ 
    color:green !important; 
} 

JSfiddle

• http://jsfiddle.net/F4xfV/1/

फ़ायरफ़ॉक्स 10.0.2 पर, यह अच्छी तरह से काम करता है।

Answer 1

आप : भूल जाते हैं। उस वजह से, संपूर्ण चयनकर्ता दूषित हो गया और काम नहीं किया। http://jsfiddle.net/a96f6/87/

संपादित करें: की तरह लगता है (? एक अद्यतन के बाद) यह अब और काम नहीं करता है, इस प्रयास करें:

input::-webkit-input-placeholder{ 
    color:red; 
} 
input:-moz-placeholder { 
    color:red; 
} 

नोट: विक्रेता उपसर्ग चयनकर्ताओं मिश्रित नहीं होते हैं (-moz, -webkit , -सुश्री, ...)। उदाहरण के लिए क्रोम "-मोज़-" को समझ नहीं पाएगा और फिर पूरे चयनकर्ता को अनदेखा करेगा। स्पष्टीकरण के लिए

संपादित करें: यह सभी ब्राउज़रों में काम करने के लिए, इस कोड का उपयोग:

::-webkit-input-placeholder { 
    color:red; 
} 

::-moz-placeholder { 
    color:red; 
} 

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

Answer 2

::-webkit-input-placeholder { 
    color: #008000; 
} 

Answer 3

@Alex ने कहा, किसी कारण से आप चयनकर्ताओं नहीं जोड़ सकते हैं एकाधिक ब्राउज़रों के लिए।

यह

::-webkit-input-placeholder { 
    color:red; 
} 

::-moz-placeholder { 
    color:red; 
} 

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

काम करेंगे लेकिन इस (कम से कम क्रोम में) काम नहीं करेगा:

::-webkit-input-placeholder, 
::-moz-placeholder, 
::-ms-placeholder, 
::placeholder { 
    color:red; 
} 

मेरे लिए एक ब्राउज़र कार्यान्वयन मोड़ की तरह लग रहा।

साथ ही, ध्यान दें कि आपको वैश्विक स्तर पर प्लेसहोल्डर शैलियों को परिभाषित करने की आवश्यकता नहीं है, फिर भी आप आमतौर पर ::placeholder चयनकर्ता को सामान्य रूप से टाइप कर सकते हैं। यह काम करता है:

.my-form .input-text::-webkit-input-placeholder { 
    color:red; 
} 

.my-form .input-text::-moz-placeholder { 
    color:red; 
} 

Answer 4

मैंने अभी भी एक ही समस्या का अनुभव किया है और सोचा है कि यह साझा करना अच्छा होगा। किसी कारण से, रंग फ़ायरफ़ॉक्स पर बदल नहीं किया गया था और मैंने देखा है कि इसकी केवल जब मैं हेक्साडेसिमल मान उपयोग करती हैं इसलिए मैं इसे एक विशेष वेबसाइट के लिए इस तरह से किया था:

::-webkit-input-placeholder { 
    color: #666666; 
} 

::-moz-placeholder { 
    color: black; 
} 

::-ms-placeholder { 
    color: #666666; 
} 

::placeholder { 
    color: #666666; 
}