: वैकल्पिक - सीएसएस-ट्रिक्स

Anonim

:optionalछद्म वर्ग लक्ष्यों आदानों (सहित रों) जो विशेष रूप से के रूप में स्थापित नहीं कर रहे हैं required(नहीं है requiredविशेषता)।

यह तब उपयोगी हो सकता है जब आप वैकल्पिक क्षेत्रों को एक विशिष्ट रूप देना चाहते हैं, हो सकता है कि आवश्यकता से थोड़ा कम दिखाई दे।

वाक्य - विन्यास

input(type=text):optional ( border: 1px solid #eee; )

डेमो

निम्नलिखित डेमो में, वैकल्पिक क्षेत्र ("नाम", "लिंग" और "महाद्वीप") की अपनी अपारदर्शिता 40% तक कम हो जाती है ताकि उपयोगकर्ता तुरंत जान सकें कि आवश्यक क्षेत्र क्या हैं। इस मामले में, "ईमेल"। जब होवर किया जाता है, तो एक वैकल्पिक इनपुट में अपारदर्शिता 100% तक जाती है।

optionalसभी प्रकार के पाठ आदानों, रेडियो बटन, चेक बॉक्स, और चयन: प्रपत्र तत्वों के सभी प्रकार पर काम करता है।

इस पेन को देखें!

नोट: आप केवल CSS के साथ नहीं जान सकते हैं कि एक लेबल वैकल्पिक क्षेत्र से जुड़ा है, जब तक कि इनपुट के बाद लेबल नहीं आता (और आप एक सिबलिंग कॉम्बिनेटर का उपयोग करते हैं), जो दुर्लभ है और आमतौर पर एक अच्छा विचार नहीं है। शायद भविष्य में अभिभावक चयनकर्ता इसमें मदद कर सकते हैं।

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

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
10+ 5+ 4+ 10+ 10+ कोई 5+

ध्यान दें कि :optionalसटीक ऑपोसिट नहीं है :not(:required)क्योंकि बाद के सभी प्रकार के तत्वों से मेल खाएंगे, जबकि :optionalफॉर्म तत्वों तक सीमित है।