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.
सिंटैक्स अंतर:
- छद्म-तत्वों को दोहरे बृहदान्त्र के साथ परिभाषित किया गया है:
:: - छद्म-वर्ग एक ही कोलन से परिभाषित होते हैं
: