CSS से HTML5 इनपुट प्लेसहोल्डर का रंग कैसे बदलें?

परिचय

HTML5 `placeholder` एट्रिब्यूट इनपुट फील्ड में हिंट टेक्स्ट दिखाता है। ब्राउज़र-विशिष्ट प्सूडो-एलिमेंट्स का उपयोग करके इसका रंग बदला जा सकता है।

बुनियादी HTML

<!DOCTYPE HTML>
<html>
<body>
    <form action="/cgi-bin/html5.cgi" method="get">
        ईमेल दर्ज करें: <input type="email" name="newinput" placeholder="email@example.com"/>
        <input type="submit" value="सबमिट" />
    </form>
</body>
</html>

CSS: ब्राउज़र-विशिष्ट प्सूडो-एलिमेंट्स

<style>
/* WebKit, Blink, Edge (Chrome, Safari, नया Edge, Opera) */
::-webkit-input-placeholder {
    color: #7F0D10;
    opacity: 1;  /* Firefox में opacity रीसेट के लिए */
}

/* Mozilla Firefox 4 से 18 */
:-moz-placeholder {
    color: #7F0D10;
    opacity: 1;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder {
    color: #7F0D10;
    opacity: 1;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: #7F0D10;
}

/* Microsoft Edge (पुराना) */
::-ms-input-placeholder {
    color: #7F0D10;
}

/* आधुनिक मानक (कुछ ब्राउज़र्स में सपोर्ट) */
::placeholder {
    color: #7F0D10;
    opacity: 1;
}
</style>

पूर्ण उदाहरण

<!DOCTYPE HTML>
<html>
<head>
    <style>
        ::-webkit-input-placeholder { color: #7F0D10; opacity: 1; }
        :-moz-placeholder { color: #7F0D10; opacity: 1; }
        ::-moz-placeholder { color: #7F0D10; opacity: 1; }
        :-ms-input-placeholder { color: #7F0D10; }
        ::-ms-input-placeholder { color: #7F0D10; }
        ::placeholder { color: #7F0D10; opacity: 1; }  /* आधुनिक */
        
        /* अतिरिक्त स्टाइलिंग */
        ::placeholder {
            font-style: italic;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <form>
        ईमेल: <input type="email" placeholder="email@example.com" /><br><br>
        नाम: <input type="text" placeholder="अपना नाम दर्ज करें" /><br><br>
        <input type="submit" value="सबमिट" />
    </form>
</body>
</html>

महत्वपूर्ण नोट्स

• ग्रुप न करें: प्रत्येक प्सूडो-एलिमेंट के लिए अलग नियम लिखें (ब्राउज़र अज्ञात सेलेक्टर्स को अनदेखा करते हैं)
• opacity: 1 Firefox में डिफ़ॉल्ट opacity कम करता है
• स्टाइल करने योग्य गुण: color, font-size, font-style, font-weight, text-transform, letter-spacing, opacity
• स्टाइल नहीं कर सकते: background, padding, margin, border, width/height

ब्राउज़र सपोर्ट सारांश