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

एचटीएमएल 5 में एक महान विशेषता है - प्लेसहोल्डर (इनपुट तत्वों के लिए टूलटिप)। इसे निम्नानुसार सेट किया गया है:

<इनपुट प्रकार = "टेक्स्ट" प्लेसहोल्डर = "यहां कुछ टेक्स्ट टाइप करें" />

आमतौर पर इस पाठ को धूसर कर दिया जाता है, लेकिन मान लें कि हमें इस पाठ को सीएसएस के साथ स्टाइल करने की आवश्यकता है।

अब तक यह केवल Google Chrome, Safari और Firefox में ही किया जा सकता है, क्योंकि ओपेरा में अभी भी इसके लिए शैलियों को सेट करने की क्षमता नहीं है, और IE इसे बिल्कुल भी समर्थन नहीं करता है।

वेबकिट और मोज़िला के लिए सीएसएस नियम:

input::-webkit-input-placeholder {}
input:-moz-placeholder {}


बस ध्यान रखें कि आप इन चयनकर्ताओं को एक में नहीं जोड़ सकते हैं, और यदि आप लिखते हैं:

input:-moz-placeholder,
input::-webkit-input-placeholder { }


तब CSS नियम काम नहीं करेंगे। और ध्यान दें कि आपको वेबकिट के लिए दो कॉलन लिखने की जरूरत है, और एक मोज़िला के लिए।


कुछ और उदाहरण:

/* webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}


यह भी ध्यान दिया जाना चाहिए कि अलग-अलग ब्राउज़र प्लेसहोल्डर के लिए अलग तरह से शैलियों का समर्थन करते हैं। उदाहरण के लिए, फ़ायरफ़ॉक्स में आप इसके लिए पृष्ठभूमि रंग सेट कर सकते हैं, लेकिन क्रोम में नहीं।

प्लेसहोल्डर विशेषता के लिए समर्थित सीएसएस शैलियों की सूची:

	क्रोम 10 (विन 7)	क्रोम 11 (विन 7)	फ़ायरफ़ॉक्स 4 (विन 7)	सफ़ारी 3.1 (विन XP और OS X)	सफारी 5 (विन 7 और ओएस एक्स)	ओपेरा 11 (विन 7)
पृष्ठभूमि रंग	नहीं	नहीं	+	नहीं	+	नहीं
सीमा	नहीं	नहीं	+	नहीं	+	नहीं
रंग	+	+	+	नहीं	+	नहीं
font-size	+	+	+	नहीं	+	नहीं
फ़ॉन्ट-शैली	+	+	+	नहीं	+	नहीं
font-weight	+	+	+	नहीं	+	नहीं
पत्र-रिक्ति	+	+	+	नहीं	+	नहीं
line-height	नहीं	नहीं	नहीं	नहीं	नहीं	नहीं
पैडिंग टॉप / बॉटम	नहीं	नहीं	+	नहीं	+	नहीं
पैडिंग लेफ्ट / राइट	नहीं	नहीं	+	नहीं	नहीं	नहीं
text-decoration	नहीं	नहीं	+	नहीं	+	नहीं
पाठ बदलना	नहीं	नहीं	+	नहीं	+	नहीं