:: प्लेसहोल्डर - सीएसएस-ट्रिक्स

Anonim

::placeholderछद्म तत्व (या एक छद्म वर्ग, कुछ मामलों में, ब्राउज़र क्रियान्वयन के आधार पर) यदि आप एक फ़ॉर्म एलीमेंट का प्लेसहोल्डर पाठ शैली कर सकते हैं। जैसे, placeholderविशेषता के साथ पाठ सेट :

आप विक्रेता-उपसर्गों के चयनकर्ताओं की इस छींटाकशी के साथ अधिकांश ब्राउज़रों में उस पाठ को स्टाइल कर सकते हैं:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )

महत्वपूर्ण चेतावनी: यह वाक्य रचना गैर-मानक है, इस प्रकार सभी नामकरण पागलपन है। यह कल्पना में बिल्कुल भी प्रकट नहीं होता है। :placeholder-shownमानक है, और यहां तक ​​कि लगता है कि लेखकों को लगता ::placeholderहै कि मानकीकृत संस्करण होगा।

किसी भी पीडो की तरह, आप इसे आवश्यकतानुसार विशिष्ट तत्वों तक ले जा सकते हैं, जैसे:

input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )

डेमो

:placeholder-shownऔर के बीच का अंतर::placeholder

:placeholder-shownजब यह प्लेसहोल्डर पाठ दिखाया जा रहा है तो इनपुट का चयन करने के लिए है। जैसा ::placeholderकि प्लेसहोल्डर पाठ को किस शैली में विरोध किया गया है ।

यहाँ एक चित्र है:

मैंने पाया कि यह बहुत भ्रामक है:

  1. चश्मा केवल है :placeholder-shownऔर नहीं::placeholder
  2. :placeholder-shown यह अभी भी प्लेसहोल्डर पाठ की स्टाइल को प्रभावित कर सकता है, क्योंकि यह एक मूल तत्व है (उदाहरण के लिए फ़ॉन्ट-आकार)।

ध्यान दें कि :placeholder-shownएक छद्म वर्ग है (यह एक विशेष स्थिति में एक तत्व है) और ::placeholderएक छद्म तत्व है (एक दृश्यमान चीज जो वास्तव में डोम में नहीं है)। एकल-बनाम-डबल कॉलन द्वारा भेद।

टैब एटकिंस ने ईमेल के जरिए मेरे लिए इसे मंजूरी दी:

: प्लेसहोल्डर-दिखाया, एक छद्म वर्ग होने के नाते, एक मौजूदा तत्व का चयन करना है - यह इनपुट का चयन करता है जब भी आप प्लेसहोल्डर-दिखाने वाले राज्य में होते हैं। प्लेसहोल्डर छद्म तत्व वास्तविक प्लेसहोल्डर टेक्स्ट को लपेटता है।

तत्व या वर्ग?

यह कार्यक्षमता मानकीकृत नहीं है। इसका मतलब है कि हर ब्राउज़र का एक अलग विचार है कि उसे कैसे काम करना चाहिए।

फ़ायरफ़ॉक्स ने मूल रूप से इसे एक छद्म वर्ग के रूप में लागू किया था, लेकिन इसे कई कारणों से बदल दिया। एक लंबी कहानी को छोटा करने के लिए, आप छद्म वर्ग के साथ उतना नहीं कर सकते।

उदाहरण के लिए, यदि आप इनपुट के फोकस होने पर पाठ का रंग बदलना चाहते हैं। आप एक चयनकर्ता का उपयोग करेंगे input:focus::placeholder, जिसे आप छद्म वर्ग के साथ नहीं कर पाएंगे (वे उसी तरह से ढेर नहीं करते हैं)।

IE10 एक तत्व के बजाय छद्म वर्ग के रूप में इसका समर्थन करता है। बाकी सभी ने छद्म तत्व लागू किया है।

फ़ायरफ़ॉक्स प्लेसहोल्डर रंग

आप देख सकते हैं कि अन्य ब्राउज़रों की तुलना में फ़ायरफ़ॉक्स में प्लेसहोल्डर का रंग फीका कैसे दिखता है। नीचे की छवि में, फ़ायरफ़ॉक्स 43 को बाईं ओर दिखाया गया है जबकि क्रोम 47 दाईं ओर दिखाया गया है:

Chrome संस्करण आदर्श रूप से वह शैली है जिसे हम हर जगह देखना चाहते हैं।

ऐसा इसलिए है, क्योंकि डिफ़ॉल्ट रूप से, फ़ायरफ़ॉक्स में सभी प्लेसहोल्डर्स के पास उनके लिए एक अपारदर्शिता मूल्य है, इसलिए इसे ठीक करने के लिए हमें इस मूल्य को रीसेट करने की आवश्यकता है:

::-moz-placeholder ( opacity: 1; )

आप फ़ायरफ़ॉक्स में इस डेमो का परीक्षण करके अधिक देख सकते हैं।

समर्थित शैलियाँ

छद्म तत्व इन गुणों की स्टाइलिंग का समर्थन करता है:

  • font गुण
  • color
  • background गुण
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

छद्म वर्ग इन गुणों का सबसे अधिक (यदि सभी नहीं) समर्थन करता है, लेकिन ऊपर बताए गए कारणों से उतना लचीला नहीं है।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
५ 57 19 * नहीं न । ९ 10.1

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 10.3

संबंधित गुण

22 मई, 2020 को पंचांग

: प्लेसहोल्डर-दिखाया गया है

input:placeholder-shown ( border: 5px solid red; ) ज्योफ ग्राहम