HTML रेडियो बटन को कैसे स्टाइल करें: एक चरण-दर-चरण मार्गदर्शिका

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

आइए रेडियो बटन छिपाकर शुरुआत करें!

हमें रेडियो बटनों के लिए क्रॉस-ब्राउज़र स्टाइलिंग की सीमाओं को स्वीकार करके शुरुआत करने की आवश्यकता है। हालाँकि यह निराशाजनक है कि हम उन्हें सीधे स्टाइल नहीं कर सकते, हम वर्कअराउंड का उपयोग कर सकते हैं। इस उदाहरण में, पहला कदम वास्तविक रेडियो बटन इनपुट को छिपाना है। मैं जानता हूं कि यह अजीब लगता है, लेकिन हम जानते हैं कि हम उन्हें स्टाइल नहीं कर सकते, इसलिए हमें बस उन्हें समीकरण से बाहर निकालने की जरूरत है।

हालाँकि, इसे सुलभ तरीके से किया जाना चाहिए, यह सुनिश्चित करते हुए कि यह सभी उपयोगकर्ताओं के लिए कार्यात्मक बना रहे। इसे निम्नलिखित शैलियों के सेट का उपयोग करके प्राप्त किया जा सकता है जो सामग्री की उपयोगिता को बनाए रखते हुए उसे दृश्य रूप से छिपाते हैं:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

कस्टम रेडियो बटन बनाना

रेडियो बटन की कस्टम उपस्थिति बनाने के लिए, हम जिस लुक की तलाश कर रहे हैं उसे बनाने के लिए कुछ सरल सीएसएस के साथ-साथ हमारे लेबल पर छद्म तत्व ::before का लाभ उठाएंगे।

हमारे उदाहरण के लिए, HTML इस तरह दिखता है:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

आरंभ करने के लिए, हम अपने लेबल तत्व में निम्नलिखित शैलियाँ जोड़ेंगे:

 label { display: inline-flex; align-items: center; }

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

अब, हम छद्म तत्व ::before का उपयोग करके अपने नकली रेडियो बटन जोड़ेंगे:

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

इस बिंदु पर, हमारे पास कुछ ऐसा है जो रेडियो बटन सूची जैसा दिखने लगा है, लेकिन यदि हम रेडियो पर क्लिक करते हैं, तो हम देखेंगे कि कुछ भी नहीं हो रहा है। यद्यपि छद्म तत्व देखने में एक रेडियो बटन जैसा दिखता है, लेकिन इसमें अन्तरक्रियाशीलता का अभाव है क्योंकि हमने अभी तक जाँच की गई स्थिति को नहीं संभाला है।

इंटरैक्शन और स्टेट्स को संभालना

हम अपने लेबल पर :checked छद्म वर्ग और आसन्न सिबलिंग चयनकर्ता के साथ चेक की गई स्थिति को संभाल सकते हैं:

 input[type="radio"]:checked + label { color: black; }

आंतरिक बिंदु के लिए, हम अपने छद्म तत्व पर रेडियल ग्रेडिएंट का लाभ उठा सकते हैं:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

वहां, अब जब हम इन पर क्लिक करते हैं, तो ये काफी हद तक देशी रेडियो बटन की तरह काम करते हैं। और हम कुछ संक्रमण प्रभाव जोड़कर इंटरैक्शन को बढ़ा सकते हैं:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

आइए फोकस के बारे में न भूलें

पहुंच में सुधार के लिए, हमें नकली रेडियो बटनों की केंद्रित स्थिति को भी संबोधित करने की आवश्यकता होगी। इस बार हमें :focus छद्म वर्ग और लेबल के साथ आसन्न सिबलिंग चयनकर्ता का उपयोग करने की आवश्यकता होगी:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

निष्कर्ष

इस पद्धति का पालन करके, हम स्टाइलिश और सुलभ कस्टम रेडियो बटन बना सकते हैं जो उपयोगकर्ता अनुभव को काफी बढ़ाते हैं। ये अनुकूलित रेडियो बटन न केवल मानक रेडियो बटनों की तुलना में बेहतर दिखते हैं बल्कि ठीक से लागू होने पर बेहतर प्रतिक्रिया और इंटरैक्शन भी प्रदान कर सकते हैं।

यह एक बहुत ही सरल उदाहरण था जो वास्तव में मूल ब्राउज़र शैलियों से बहुत अलग नहीं लग सकता है, लेकिन मुख्य बात यह है कि इस सेटअप के साथ, हम जो चाहें वह कर सकते हैं। इसलिए, बेझिझक शैलियों के साथ प्रयोग करें और उन्हें अपने प्रोजेक्ट के डिज़ाइन में ढालें।

क्या आप इसे क्रियान्वित होते देखना चाहते हैं?

नीचे दिए गए कोड पेन उदाहरण में इस तकनीक का डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।

याद रखें कि थोड़ी रचनात्मकता और कुछ सीएसएस के साथ, आप पहुंच और उपयोगिता बनाए रखते हुए अपने डिज़ाइन से मेल खाने के लिए HTML रेडियो बटन की उपस्थिति को बदल सकते हैं!