सीएसएस का उपयोग करके HTML इनपुट फ़ील्ड में प्लेसहोल्डर टेक्स्ट का रंग कैसे बदलें

सीएसएस के साथ प्लेसहोल्डर टेक्स्ट को स्टाइल करना

HTML फॉर्म के साथ काम करते समय, आप इनपुट फ़ील्ड के भीतर प्लेसहोल्डर टेक्स्ट की उपस्थिति को कस्टमाइज़ करना चाह सकते हैं। हालाँकि Chrome v4 और अन्य ब्राउज़र इनपुट[प्रकार=टेक्स्ट] तत्वों पर प्लेसहोल्डर विशेषता का समर्थन करते हैं, लेकिन इस विशेषता पर केवल CSS शैलियों को लागू करना हमेशा अपेक्षा के अनुरूप काम नहीं करता है।

उदाहरण के लिए, मानक सीएसएस चयनकर्ताओं का उपयोग करके प्लेसहोल्डर टेक्स्ट का रंग बदलने का प्रयास वांछित परिणाम नहीं देगा। यह आलेख बताता है कि आप सही सीएसएस छद्म तत्वों और ब्राउज़र-विशिष्ट नियमों का उपयोग करके प्लेसहोल्डर टेक्स्ट के रंग को प्रभावी ढंग से कैसे संशोधित कर सकते हैं।

प्लेसहोल्डर टेक्स्ट स्टाइलिंग तकनीकों को समझना

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

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

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

प्लेसहोल्डर स्टाइलिंग के लिए उन्नत तकनीकें

बुनियादी सीएसएस और जावास्क्रिप्ट विधियों के अलावा, प्लेसहोल्डर टेक्स्ट को स्टाइल करने के लिए और भी उन्नत तकनीकें हैं। ऐसी ही एक विधि अधिक गतिशील स्टाइलिंग प्रणाली बनाने के लिए सीएसएस वेरिएबल्स का उपयोग करना है। सीएसएस वैरिएबल, जिन्हें कस्टम प्रॉपर्टी के रूप में भी जाना जाता है, डेवलपर्स को उन मानों को संग्रहीत करने की अनुमति देता है जिन्हें पूरे स्टाइलशीट में पुन: उपयोग किया जा सकता है। यह कई तत्वों में शैलियों को अद्यतन करने की प्रक्रिया को सरल बना सकता है। उदाहरण के लिए, प्लेसहोल्डर रंग के लिए एक कस्टम प्रॉपर्टी को परिभाषित करके, आप एकाधिक सीएसएस नियमों को संशोधित किए बिना आसानी से एक ही स्थान पर रंग बदल सकते हैं।

विचार करने का एक अन्य पहलू फ्रेमवर्क और लाइब्रेरीज़ का उपयोग है जो विस्तारित स्टाइलिंग क्षमताएं प्रदान करते हैं। बूटस्ट्रैप जैसी लाइब्रेरी और टेलविंड सीएसएस जैसे फ्रेमवर्क पूर्वनिर्धारित कक्षाएं प्रदान करते हैं जो प्लेसहोल्डर सहित तत्वों को स्टाइल बनाने में मदद कर सकते हैं। ये उपकरण समय बचा सकते हैं और एप्लिकेशन के विभिन्न हिस्सों में एकरूपता सुनिश्चित कर सकते हैं। इसके अतिरिक्त, SASS या LESS जैसे प्रीप्रोसेसरों का लाभ उठाकर नेस्टिंग, मिक्सिन और इनहेरिटेंस जैसी सुविधाओं के साथ CSS को और बढ़ाया जा सकता है, जिससे कोड अधिक रखरखाव योग्य और स्केलेबल बन जाता है।

प्लेसहोल्डर स्टाइलिंग तकनीकों पर अंतिम विचार

HTML इनपुट फ़ील्ड में प्लेसहोल्डर टेक्स्ट का रंग बदलने के लिए CSS और जावास्क्रिप्ट समाधानों के संयोजन की आवश्यकता होती है। सीएसएस छद्म-तत्वों और ब्राउज़र-विशिष्ट चयनकर्ताओं का उपयोग संगतता सुनिश्चित करता है, जबकि जावास्क्रिप्ट उपयोगकर्ता इंटरैक्शन के आधार पर गतिशील परिवर्तनों को सक्षम बनाता है। सीएसएस वेरिएबल्स, फ्रेमवर्क और प्रीप्रोसेसर जैसी उन्नत तकनीकें स्टाइलिंग प्रक्रिया को और बढ़ा सकती हैं, जिससे यह अधिक कुशल और रखरखाव योग्य बन सकती है। इन तरीकों में महारत हासिल करने से फॉर्म सौंदर्यशास्त्र पर बेहतर नियंत्रण होता है, जिससे उपयोगकर्ता अनुभव में सुधार होता है।