विशिष्ट इनपुट फ़ील्ड के प्लेसहोल्डर रंग को कैसे बदलें?

Question

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

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #909; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #909; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #909; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #909; 
} 

लेकिन यह कोड सभी इनपुट प्लेसहोल्डर पर लागू होता है, और मुझे एक ही रंग में सभी इनपुट प्लेसहोल्डर की आवश्यकता नहीं है। तो क्या कोई मेरी मदद कर सकता है। अग्रिम में धन्यवाद।

Answer 1

आप कुछ classname को -input-placeholder आवंटित है और किसी भी input आप की जरूरत है अपने प्लेसहोल्डर इस के लिए करने के लिए उस वर्ग को जोड़ने के लिए, बस इस JS Fiddle

.change::-webkit-input-placeholder { 
 
    /* WebKit, Blink, Edge */ 
 
    color: #909; 
 
} 
 
.change:-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 
.change::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 
.change:-ms-input-placeholder { 
 
    /* Internet Explorer 10-11 */ 
 
    color: #909; 
 
} 
 
input[type="text"]{ 
 
    display:block; 
 
    width:300px; 
 
    padding:5px; 
 
    margin-bottom:5px; 
 
    font-size:1.5em; 
 
}

<input type="text" placeholder="text1" class="change"> 
 
<input type="text" placeholder="text2"> 
 
<input type="text" placeholder="text3"> 
 
<input type="text" placeholder="text4" class="change"> 
 
<input type="text" placeholder="text5">

Answer 2

तुम भी एक इस्तेमाल कर सकते हैं की तरह करने की जरूरत है प्लेसहोल्डर के बिना जावास्क्रिप्ट समाधान जो आप करना चाहते हैं। यहाँ कोड है:

//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.

<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/> 
 
<input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>

कृपया ध्यान दें कि यह सुधार एक अस्थायी प्लेसहोल्डर है और वास्तविक लॉगिन रूपों के लिए इस्तेमाल नहीं किया जाना चाहिए। मैं सुझाव देता हूं कि @Ayaz_Shah ने अपने उत्तर में क्या अनुशंसा की थी।