CSS के साथ HTML इनपुट एलिमेंट के प्लेसहोल्डर टेक्स्ट को स्टाइल करने के लिए, आपको स्यूडो-एलिमेंट एट्रिब्यूट को टारगेट करना होगा। आप इसे CSS स्यूडो सिलेक्टर :: के साथ करते हैं।
प्लेसहोल्डर टेक्स्ट के साथ एक नियमित इनपुट एलिमेंट
<input type="text" placeholder="Hello there!">डिफ़ॉल्ट ब्राउज़र स्टाइलिंग के साथ प्लेसहोल्डर टेक्स्ट कैसा दिखता है:
CSS
अब आइए CSS ::placeholder सिलेक्टर का उपयोग करके इनपुट एलिमेंट के प्लेसहोल्डर टेक्स्ट को लाल बनाएं:
input::placeholder { color: red; }परिणाम:
पुन: उपयोग करने योग्य प्लेसहोल्डर टेक्स्ट क्लास
यदि आप अपने सभी <input> एलिमेंट प्लेसहोल्डर टेक्स्ट को उसी तरह स्टाइल नहीं करना चाहते जैसा ऊपर का कोड करता है (इनपुट एलिमेंट को सीधे टारगेट करके), तो आप एक क्लास का उपयोग कर सकते हैं:
.custom-input-placeholder::placeholder { color: red; }और इसे किसी भी इनपुट एलिमेंट में जोड़ें जिसे आप चाहते हैं:
<input class="custom-input-placeholder" type="text" placeholder="Hello there!">जानने योग्य बातें
स्यूडो-एलिमेंट्स को स्यूडो-क्लासेस के साथ भ्रमित न करें।
- स्यूडो-एलिमेंट्स DOM के एक भाग का प्रतिनिधित्व करते हैं।
- स्यूडो-क्लासेस यूज़र के साथ इसके इंटरैक्शन के आधार पर एलिमेंट की स्थिति का प्रतिनिधित्व करते हैं। उदाहरण के लिए:
:focus, या:active।
सिंटैक्स अंतर:
- स्यूडो-एलिमेंट्स को डबल कोलन से परिभाषित किया जाता है:
:: - स्यूडो-क्लासेस को सिंगल कोलन से परिभाषित किया जाता है:
:
