चेकबॉक्स और रेडियो का सरल अनुकूलन

ज्वाइन करने के बजाय

सभी को शुभ दिन!

प्रपत्र तत्वों का अनुकूलन संभवतः वेब डिज़ाइन में सबसे रोमांचक गतिविधियों में से एक है। क्या यह व्यवसाय उचित है, सभी के लिए खुद तय किया जाता है, हालांकि यह स्पष्ट है कि हमारे समय में, डिजाइनर और लेआउट डिजाइनर अपना समय और ऊर्जा इस के लिए समर्पित करते हैं।

दुर्भाग्य से, सीएसएस अकेले अक्सर एक विशेष रूप तत्व को आसानी से स्टाइल करने के लिए पर्याप्त नहीं है। शायद यही कारण है कि कई लोग अपने रूपों के लिए यूनिफॉर्म जैसी चीजों का उपयोग करते हैं। व्यक्तिगत रूप से, मैं हमेशा ऐसे उद्देश्यों के लिए उपयोग की जाने वाली जावास्क्रिप्ट की मात्रा को कम करने की कोशिश करता हूं, इसलिए मैं रेडियो बटन और चेकबॉक्स को अनुकूलित करने के लिए पूरी तरह से मूल HTML + सीएसएस विधि के बारे में बात करना चाहता हूं।

मुझे यकीन है कि हैबे के अधिकांश विशेषज्ञों के लिए, वे समान तरीकों का उपयोग करते हैं, उन लोगों के लिए जो यूनिफ़ॉर्म जैसे जेएस-लाइब्रेरीज़ का उपयोग करते हैं, मुझे उम्मीद है कि यह लेख उपयोगी होगा।

चलो चलते हैं!

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

मुख्य विचार एक विशिष्ट फॉर्म एलिमेंट के साथ संबंध स्थापित करने के लिए HTML लेबल टैग की मूल "क्षमता" पर आधारित है। वास्तव में यह सब है, तो केवल कोड।

अंकन

< ul >
< li >
< input id = "cfirst" प्रकार = "चेकबॉक्स" नाम = "पहला" छिपा हुआ / > चेक किया गया
< लेबल के लिए = "cfirst" > चेक किया गया चेकबॉक्स < / लेबल >
< / li >
< li >
< input id = "csecond" प्रकार = "चेकबॉक्स" नाम = "दूसरा" छिपा हुआ / >
< लेबल के लिए = "csecond" > अनचेक किया गया चेकबॉक्स < / लेबल >
< / li >
< li >
< input id = "cthird" प्रकार = "चेकबॉक्स" नाम = "तीसरा" छिपा हुआ अक्षम / >
< लेबल के लिए = "cthird" > अक्षम चेकबॉक्स < / लेबल >
< / li >
< li >
< input id = "clast" प्रकार = "चेकबॉक्स" नाम = "अंतिम" छिपा हुआ अक्षम / > चेक किया गया
< लेबल के लिए = "क्लैस्ट" > अक्षम किया गया चेकबॉक्स < / लेबल >
< / li >
< / ul >
< ul >
< li >
< input id = "rfirst" प्रकार = "रेडियो" नाम = "रेडियो" छिपा हुआ / > चेक किया गया
< लेबल के लिए = "rfirst" > चेक किया गया रेडियो < / लेबल >
< / li >
< li >
< input id = "rsecond" प्रकार = "रेडियो" नाम = "रेडियो" छिपा हुआ / >
< लेबल के लिए = "rsecond" > अनियंत्रित रेडियो < / लेबल >
< / li >
< li >
< input id = "rthird" प्रकार = "रेडियो" नाम = "रेडियो" छिपा हुआ अक्षम / >
< लेबल के लिए = "rthird" > अक्षम रेडियो < / लेबल >
< / li >
< / ul >

पूरी तरह से देशी मार्कअप। इनपुट के साथ-साथ लेबल का उपयोग करना ट्यूटोरियल की तरह ही है। महत्वपूर्ण बिंदु यह है कि आपको प्रत्येक इनपुट के लिए और उन्हें बाँधने के लिए लेबल के लिए एक आईडी निर्दिष्ट करने की आवश्यकता है।

मुझे लगता है कि सभी ने छिपे हुए गुण के उपयोग पर ध्यान दिया, जो इनपुट तत्वों को स्वयं छुपाता है, हालांकि, लेबल के साथ संबंध के कारण, हम अभी भी उन्हें हेरफेर कर सकते हैं। परिणामस्वरूप, हमें कुछ ऐसा मिलता है:


पूरी तरह से ऊब, लेकिन यह काम करता है। अब यह सब अच्छा करने की व्यवस्था है जैसा कि यह होना चाहिए। ऐसा करने के लिए, यूनिफ़ॉर्म वेबसाइट पर उपयोग किए जाने वाले स्प्राइट का उपयोग करें।

पंजीकरण

इनपुट [ प्रकार = "चेकबॉक्स" ] ,
इनपुट [ प्रकार = "रेडियो" ] {
प्रदर्शन : कोई नहीं ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] + लेबल ,
इनपुट [ प्रकार = "रेडियो" ] + लेबल {
फ़ॉन्ट : 18 पीएक्स बोल्ड ;
रंग : # 444 ;
कर्सर : सूचक ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] + लेबल :: पहले ,
इनपुट [ प्रकार = "रेडियो" ] + लेबल :: { से पहले
सामग्री : "" ;
प्रदर्शन : इनलाइन- ब्लॉक ;
ऊंचाई : 18 पीएक्स ;
चौड़ाई : 18 पीएक्स ;
मार्जिन : 0 5px 0 0 ;
पृष्ठभूमि-छवि : url ( यूनिफ़ॉर्म . com/images/sprite.png ) ;
बैकग्राउंड-रिपीट : नो-रिपीट ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] + लेबल :: से पहले
पृष्ठभूमि-स्थिति : -38px -260px ;
}
इनपुट [ प्रकार = "रेडियो" ] + लेबल :: { से पहले
पृष्ठभूमि-स्थिति : 0px -279px ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] : चेक + लेबल :: से पहले {
पृष्ठभूमि-स्थिति : -114px -260px ;
}
इनपुट [ प्रकार = "रेडियो" ] : चेक + लेबल :: से पहले {
बैकग्राउंड-पोज़िशन : -108px -279px ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] : निष्क्रिय + लेबल :: से पहले
पृष्ठभूमि-स्थिति : -152px -260px ;
}
इनपुट [ प्रकार = "चेकबॉक्स" ] : चेक किया गया : अक्षम + लेबल :: से पहले
पृष्ठभूमि की स्थिति : -171px -260px ;
}
इनपुट [ प्रकार = "रेडियो" ] : निष्क्रिय + लेबल :: से पहले
पृष्ठभूमि-स्थिति : -144px -279px ;
}
इनपुट [ प्रकार = "रेडियो" ] : जाँच की गई : अक्षम + लेबल :: से पहले
पृष्ठभूमि की स्थिति : -162px -279px ;
}

यह अभी भी यथासंभव सरल है। हम अपने "आभासी नियंत्रण" को दिखाने के लिए छद्म तत्व से पहले का उपयोग करते हैं और उपयोगकर्ता प्रतिस्थापन की सूचना नहीं देता है। स्प्राइट के हिस्से, इनपुट की स्थिति के आधार पर बदलते हैं।

परिणाम कुछ इस प्रकार है:



डेमो

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

मुझे उम्मीद है कि यह लेख शुरुआती टाइपर्स के लिए उपयोगी होगा और ऐसे उद्देश्यों के लिए जेएस-बैसाखी का उपयोग करने के बारे में उन्हें रोक देगा। आपका ध्यान के लिए धन्यवाद!

UPD: जैसा कि सम्मानित सेलेनिट 2 ने उल्लेख किया है , यह विधि संभवतः html विनिर्देशन ( लिंक ) का समर्थन करने में कष्टप्रद त्रुटि के कारण आईओएस प्लेटफॉर्म के तहत सफारी ब्राउज़र में काम नहीं करेगी।