:placeholder-shownछद्म वर्ग का चयन करता है इनपुट तत्व ही जब प्लेसहोल्डर पाठ एक रूप इनपुट में मौजूद है। इसे उन इनपुट्स के बीच अंतर करने का एक अच्छा तरीका समझें जो वर्तमान में प्लेसहोल्डर टेक्स्ट को दिखा रहे हैं।
input:placeholder-shown ( border: 5px solid red; )प्लेसहोल्डर्स के पीछे का विचार
टेक्स्ट-आधारित s और इनपुट में प्लेसहोल्डर टेक्स्ट हो सकता है। यह पाठ है जो एक संभावित मूल्य का सुझाव देने के लिए इनपुट खाली होने पर दिखाया जाता है। उदाहरण के लिए, स्कूल के लिए पूछने वाले एक फॉर्म में एक लेबल हो सकता है कि वह क्या मांग रहा है, लेकिन फिर सुझाव दें कि "वन हिल्स उदाहरण हाई स्कूल" उदाहरण के मूल्य के रूप में प्लेसहोल्डर में दें:
School Name: :placeholder-shownऔर के बीच का अंतर::placeholder
:placeholder-shownजब यह प्लेसहोल्डर पाठ दिखाया जा रहा है तो इनपुट का चयन करने के लिए है। जैसा ::placeholderकि प्लेसहोल्डर पाठ को किस शैली में विरोध किया गया है ।
यहाँ एक चित्र है:
मैंने पाया कि यह बहुत भ्रामक है:
- चश्मा केवल है
:placeholder-shownऔर नहीं::placeholder :placeholder-shownयह अभी भी प्लेसहोल्डर पाठ की स्टाइल को प्रभावित कर सकता है, क्योंकि यह एक मूल तत्व है (उदाहरण के लिए फ़ॉन्ट-आकार)।
ध्यान दें कि :placeholder-shownएक छद्म वर्ग है (यह एक विशेष स्थिति में एक तत्व है) और ::placeholderएक छद्म तत्व है (एक दृश्यमान चीज जो वास्तव में DOM में नहीं है)। एकल-बनाम-डबल कॉलन द्वारा भेद।
टैब एटकिंस ने ईमेल के जरिए मेरे लिए इसे मंजूरी दी:
:placeholder-shownएक छद्म वर्ग होने के नाते, एक मौजूदा तत्व का चयन करना होगा। जब भी आप प्लेसहोल्डर-दिखाने की स्थिति में होते हैं, तो यह इनपुट का चयन करता है।::placeholderछद्म तत्व वास्तविक प्लेसहोल्डर पाठ गिर्द घूमती है।
यदि आपको प्लेसहोल्डर टेक्स्ट को स्टाइल करने की आवश्यकता है
उपयोग करें ::placeholder (वास्तव में, इसके लिए सभी पागल विक्रेता उपसर्गों का उपयोग करें) जो हमने यहां पंचांग में विस्तृत किया है।
अधिक जानकारी
- चयनकर्ता स्तर 4 कल्पना
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| ४ 47 | ५१ | 1 1* | । ९ | ९ |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 81 | 9.0-9.2 |