😆 ♨️ 🍣 जेएस के बिना रेडियोबोटन अनुकूलन 🥌 📰 😊

एक बार, मुझे साइट फॉर्म पर कई रंगों में से एक का विकल्प बनाने का काम मिला। ऐसा लगेगा कि कुछ भी आसान नहीं है। radiobutton तत्व, साथ ही संभव है, इस कार्य के लिए उपयुक्त है, आपको बस इसे थोड़ा अनुकूलित करने की आवश्यकता है। यहीं से समस्याएं शुरू होती हैं। तथ्य यह है कि checkbutton और checkbutton का प्रतिपादन ब्राउज़र द्वारा नियंत्रित नहीं किया जाता है, लेकिन ओएस द्वारा। तदनुसार, अधिकांश सीएसएस गुण (उदाहरण के लिए, background-color ) उन्हें प्रभावित नहीं करते हैं।

इंटरनेट पर, मुझे radiobutton को अनुकूलित करने के कई तरीके मिले, लेकिन वे सभी मुझे बहुत जटिल लगे, इसलिए मैंने खुद से आने का फैसला किया।

मेरा विचार इस तथ्य पर आधारित है कि जब उपयोगकर्ता label पर क्लिक करता है, तो radiobutton स्विच करता है। तो आप एक radiobutton नहीं, बल्कि एक label को कस्टमाइज़ कर सकते हैं।

HTML कोड के एक उदाहरण पर विचार करें:

 <input type="radio" name="color" value="#0000ff" id="blue"/> <label for="blue" class="blue"></label> <input type="radio" name="color" value="#00ffff" id="cyan"/> <label for="cyan" class="cyan"></label>

यहां कुछ भी असामान्य नहीं है। साधारण radiobutton और उन्हें हस्ताक्षर।

अब CSS:

 //  radiobutton input[type="radio"]{display: none;} //  label label{ width: 20px; height: 20px; } label.blue{background-color: blue;} label.cyan{background-color: #00ffff;} //    input[type="radio"]:checked+label{ border: black solid 2px; }

यहां हम radiobutton छिपाते हैं और आकर्षित करते हैं कि हमें label कैसे चाहिए। चिह्नित राज्य input[type="radio"]:checked+label लिए एक label बनाएं input[type="radio"]:checked+label । सब कुछ सरल और सुरुचिपूर्ण है।

यह पोस्ट को समाप्त कर सकता है, यदि एक "लेकिन" के लिए नहीं।

सेब की ओर सड़े टमाटर की एक जोड़ी

दुनिया अच्छी और सुंदर होगी अगर इसमें एक भी निगम नहीं होता जिसका एक विशेष विकास पथ होता है। यह Apple है, जो अपने उपयोगकर्ताओं को label पर प्रहार करने के अधिकार से वंचित करता है। नतीजतन, मेरा तरीका iPhone और iPad पर काम नहीं करता है। सबसे दिलचस्प बात यह है कि विंडोज पर सफारी सब कुछ सही करता है। दुर्भाग्य से, जाँच करने के लिए एक भी iMac हाथ में नहीं था।

विशेष रूप से हिपस्टर्स के लिए, मुझे JS का उपयोग करना पड़ा (कोड jQuery के साथ संयोजन में उपयोग के लिए डिज़ाइन किया गया है):

  var deviceAgent = navigator.userAgent.toLowerCase(); var iOS = deviceAgent.match(/(iphone|ipod|ipad)/); if (iOS) { $('label').click(function (event) { $('#' + $(event.target).attr('for')).attr('checked', true).change(); }); }

उदाहरण का उपयोग करें

Long Twit एक सरल सेवा है जो पाठ को चित्र में प्रस्तुत करती है और Twitter को भेजती है। आप पाठ और पृष्ठभूमि का रंग चुन सकते हैं।

जेएस के बिना रेडियोबोटन अनुकूलन

सेब की ओर सड़े टमाटर की एक जोड़ी

उदाहरण का उपयोग करें

More articles: