आमतौर पर इनपुट और टेक्स्टएरिया पर प्लेसहोल्डर विशेषता का उपयोग उन तत्वों के भीतर कार्रवाई के लिए कॉल प्रदान करने के लिए किया जाता है। इस नोट में मैं प्लेसहोल्डर्स के टेक्स्ट को स्टाइल करने के लिए कई विकल्पों के साथ-साथ उनके एनीमेशन के विकल्पों का भी वर्णन करूंगा
इसलिए, उदाहरण के लिए, सीएसएस नियमों के निम्नलिखित सेट का उपयोग करके हमारे प्लेसहोल्डर का टेक्स्ट रंग बदला जा सकता है:
::-वेबकिट-इनपुट-प्लेसहोल्डर (रंग: #c0392b ;) ::-moz-प्लेसहोल्डर (रंग: #c0392b ;) /* फ़ायरफ़ॉक्स 19+ */ :-moz-प्लेसहोल्डर (रंग: #c0392b ;) /* फ़ायरफ़ॉक्स 18- */ :-ms-इनपुट-प्लेसहोल्डर (रंग: #c0392b ;)
इतनी सरल संपत्ति को स्टाइल करने के लिए कोड की लंबाई एक सामान्य मानक की कमी के कारण होती है, और इसलिए प्रत्येक ब्राउज़र ने अपने तरीके से प्लेसहोल्डर स्टाइल के लिए समर्थन लागू किया है।
साथ ही, सभी समर्थित नहीं हैं सीएसएस गुण. यहां बिल्कुल समर्थित संपत्तियों की एक सूची दी गई है:
फ़ॉन्ट (और संबंधित)
पृष्ठभूमि (और संबंधित)
रंग
शब्द-अंतराल
पत्र अंतराल
text-decoration
ऊर्ध्वाधर- align
पाठ बदलना
ऊंची लाईन
पाठ इंडेंट
पाठ-अतिप्रवाह
अस्पष्टता
ऐसा भी होता है कि प्लेसहोल्डर टेक्स्ट इनपुट या टेक्स्टएरिया तत्व की चौड़ाई को "विस्तारित" करता है (के लिए एक सामान्य मामला) मोबाइल उपकरणों). साथ ही यह अपने आप भद्दा होकर कट जाता है।
टेक्स्ट-ओवरफ़्लो: एलिप्सिस जैसी सीएसएस प्रॉपर्टी हमें इस समस्या को ठीक करने में मदद करेगी, जो प्लेसहोल्डर के क्रॉप किए गए क्षेत्र में एक सौंदर्यपूर्ण एलिप्सिस जोड़ देगी। शैलियों में हम इस प्रकार लिखते हैं:
इनपुट [प्लेसहोल्डर] (टेक्स्ट-ओवरफ्लो: एलिप्सिस;) इनपुट::-मोज़-प्लेसहोल्डर (टेक्स्ट-ओवरफ्लो: एलिप्सिस;) इनपुट:-मोज़-प्लेसहोल्डर (टेक्स्ट-ओवरफ्लो: एलिप्सिस;) इनपुट: एमएस-इनपुट-प्लेसहोल्डर ( पाठ-अतिप्रवाह : दीर्घवृत्त ;)
हमारे प्लेसहोल्डर्स में और भी अधिक सौंदर्यशास्त्र जोड़ने के लिए, संबंधित तत्व पर फोकस प्राप्त होने पर इसे छिपाने का प्रभाव जोड़ना संभव है।
एनीमेशन तत्वों के साथ ऐसे छिपाने के कुछ उदाहरण:
/* फोकस करने पर प्लेसहोल्डर पारदर्शिता में सहज परिवर्तन */.इनपुट ::-वेबकिट-इनपुट-प्लेसहोल्डर (अपारदर्शिता: 1; संक्रमण: अपारदर्शिता 0.3s आसानी ;) .इनपुट::-moz-प्लेसहोल्डर (अपारदर्शिता: 1; संक्रमण: अस्पष्टता 0.3s आसानी ;).इनपुट:-moz- प्लेसहोल्डर (अपारदर्शिता: 1; संक्रमण: अपारदर्शिता 0.3 सेकंड सहजता;)। इनपुट:-एमएस-इनपुट-प्लेसहोल्डर (अस्पष्टता: 1; संक्रमण: अपारदर्शिता 0.3 सेकंड आसान;)। ) .इनपुट :फोकस::-मोज-प्लेसहोल्डर (अपारदर्शिता : 0 ; संक्रमण : अपारदर्शिता 0.3एस सहजता ;) .इनपुट :फोकस:-मोज-प्लेसहोल्डर (अपारदर्शिता : 0 ; संक्रमण : अपारदर्शिता 0.3एस सहजता ;) :-एमएस -इनपुट-प्लेसहोल्डर (अपारदर्शिता: 0; संक्रमण: अपारदर्शिता 0.3s आसानी;) /* फोकस होने पर प्लेसहोल्डर को दाईं ओर शिफ्ट करें */.इनपुट ::-वेबकिट-इनपुट-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 0px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी;) .इनपुट::-moz-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 0px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी ;).इनपुट:-मोज़-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 0px; ट्रांज़िशन: टेक्स्ट-इंडेंट 0.3s आसानी;).इनपुट:-ms-इनपुट-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 0px; ट्रांज़िशन: टेक्स्ट-इंडेंट 0.3s आसानी ;).इनपुट :फोकस::-वेबकिट-इनपुट-प्लेसहोल्डर(टेक्स्ट-इंडेंट: 500px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी;)। इनपुट: फोकस::-मोज़-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 500px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी;)। इनपुट: फोकस:- moz-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 500px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी ;) .इनपुट: फोकस:-ms-इनपुट-प्लेसहोल्डर (टेक्स्ट-इंडेंट: 500px; संक्रमण: टेक्स्ट-इंडेंट 0.3s आसानी ;) /* फोकस होने पर प्लेसहोल्डर को नीचे शिफ्ट करें */.इनपुट ::-वेबकिट-इनपुट-प्लेसहोल्डर (लाइन-ऊंचाई: 20px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;) .इनपुट::-moz-प्लेसहोल्डर (लाइन-ऊंचाई: 20px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी ;).इनपुट:-मोज़-प्लेसहोल्डर (लाइन-ऊंचाई: 20px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;).इनपुट:-ms-इनपुट-प्लेसहोल्डर (लाइन-ऊंचाई: 20px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी ;).इनपुट :फोकस::-वेबकिट-इनपुट-प्लेसहोल्डर(लाइन-ऊंचाई: 100px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;)। इनपुट: फोकस::-मोज़-प्लेसहोल्डर (लाइन-ऊंचाई: 100px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;)। इनपुट: फोकस:- moz-प्लेसहोल्डर (लाइन-ऊंचाई: 100px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;)। इनपुट: फोकस:-ms-इनपुट-प्लेसहोल्डर (लाइन-ऊंचाई: 100px; संक्रमण: लाइन-ऊंचाई 0.5s आसानी;)
आइए यहीं समाप्त करें।
यदि आप प्लेसहोल्डर विशेषता से परिचित नहीं हैं, तो आइए थोड़ा समझाते हैं कि यह क्या है और इसका उपयोग कहां किया जाता है। इसका उपयोग फॉर्म इनपुट फ़ील्ड में किया जाता है। विशेषता इनपुट फ़ील्ड में एक टेक्स्ट प्रदर्शित करती है, जो एक निश्चित संकेत की भूमिका का प्रतिनिधित्व करती है। इससे पहले हमारी वेबसाइट पर एक उदाहरण था जावास्क्रिप्ट का उपयोग करना, सकारात्मक पक्ष यह विधियह क्रॉस-ब्राउज़र संगत है. अब बात करते हैं प्लेसहोल्डर विशेषता को स्टाइल करने की, जिसका उपयोग इनपुट और टेक्स्टएरिया तत्वों पर किया जाता है।
हमारे उदाहरण में इनपुट फ़ील्ड कोड कुछ इस तरह दिखेगा:
आउटपुट पर हमें निम्नलिखित फ़ील्ड मिलती है:
अब आइए कल्पना करें कि हमें प्लेसहोल्डर को स्टाइल करने की आवश्यकता है, इसके लिए हमें सीएसएस में नियमों का एक सेट लिखना होगा:
::-वेबकिट-इनपुट-प्लेसहोल्डर (रंग: #c1c1c1; ) ::-moz-प्लेसहोल्डर (रंग: #c1c1c1; ) /* फ़ायरफ़ॉक्स 19+ */ :-moz-प्लेसहोल्डर (रंग: #c1c1c1; ) /* फ़ायरफ़ॉक्स 18- */ :-ms-इनपुट-प्लेसहोल्डर (रंग: #c1c1c1; )
हम पाते हैं:
हम सभी संपत्तियों को नहीं बदल सकते, लेकिन आधुनिक ब्राउज़रों द्वारा समर्थित उनमें से अधिकांश की सूची नीचे दी गई है:
फ़ॉन्ट(संबंधित गुण भी)
पृष्ठभूमि(संबंधित गुण भी)
रंग
शब्द-अंतराल
पत्र अंतराल
text-decoration
ऊर्ध्वाधर- align
पाठ बदलना
ऊंची लाईन
पाठ इंडेंट
पाठ-अतिप्रवाह
अस्पष्टता
में विभिन्न ब्राउज़रनियम अलग तरीके से लिखा गया है, क्योंकि हालाँकि कोई एकल मानक नहीं है, फिर भी अभिलेखों का यह सेट प्रासंगिक बना हुआ है। IE ब्राउज़र में, साथ ही संस्करण 18 से नीचे के फ़ायरफ़ॉक्स में, प्लेसहोल्डर को एक छद्म-वर्ग के रूप में माना जाता है, और नए ब्राउज़र फ़ायरफ़ॉक्स, वेबकिट और ब्लिंक में इसे एक छद्म-तत्व के रूप में माना जाता है।
प्लेसहोल्डर में टेक्स्ट को छोटा करना
कभी-कभी टूलटिप्स इतने लंबे हो सकते हैं कि वे इनपुट फ़ील्ड में पूरी तरह फिट नहीं हो पाते। इन उद्देश्यों के लिए, आप अतिरिक्त गुणों का भी उपयोग कर सकते हैं जो आपको इनपुट फ़ील्ड में प्लेसहोल्डर टेक्स्ट को छोटा करने की अनुमति देंगे।
इनपुट (टेक्स्ट-ओवरफ्लो:एलिप्सिस;) इनपुट::-मोज-प्लेसहोल्डर (टेक्स्ट-ओवरफ्लो:एलिप्सिस;) इनपुट:-मोज-प्लेसहोल्डर (टेक्स्ट-ओवरफ्लो:एलिप्सिस;) इनपुट:-एमएस-इनपुट-प्लेसहोल्डर (टेक्स्ट-ओवरफ्लो :एलिप्सिस )
परिणामस्वरूप, हमें इस तरह के प्लेसहोल्डर के साथ एक इनपुट फ़ील्ड मिलता है:
किसी फ़ील्ड पर क्लिक करते समय टेक्स्ट छिपाएँ
डिफ़ॉल्ट रूप से, प्रत्येक ब्राउज़र प्लेसहोल्डर की प्रतिक्रिया की अलग-अलग व्याख्या करता है। कुछ ब्राउज़रों में जब आप फ़ील्ड पर क्लिक करते हैं तो यह तुरंत छिप जाता है, अन्य में यह तब छिप जाता है जब इनपुट फ़ील्ड में कम से कम एक अक्षर होता है। जब आप फ़ील्ड पर क्लिक करते हैं तो आइए टेक्स्ट को गायब कर दें, सभी ब्राउज़रों में ऐसा ही होता है।
:फोकस::-वेबकिट-इनपुट-प्लेसहोल्डर (रंग: पारदर्शी; ) :फोकस::-मोज-प्लेसहोल्डर (रंग: पारदर्शी; ) :फोकस:-मोज-प्लेसहोल्डर (रंग: पारदर्शी; ) :फोकस:-एमएस-इनपुट -प्लेसहोल्डर (रंग: पारदर्शी;)
हमें यह क्रिया मिलती है:
आकार को कम करने और दृश्य शोर को कम करने के प्रयास में, डिजाइनर टैग करते हैं
बुरी तरह
अच्छा
स्टाइलिंग: प्लेसहोल्डर रंग सीएसएस बदलें
प्लेसहोल्डर सीएसएस के साथ इनपुट फ़ील्ड शैली बदलें
बुरी तरह
के लिए प्लेसहोल्डर प्रभाव
प्लेसहोल्डर विशेषता केवल के लिए काम करती है और
प्लेसहोल्डर विशेषता केवल के लिए काम करती है और