HTML रेडियो बटन वेब फ़ॉर्म का एक प्रमुख हिस्सा हैं, लेकिन उनकी डिफ़ॉल्ट उपस्थिति वांछित होने के लिए बहुत कुछ छोड़ देती है। इस ब्लॉग पोस्ट में, हम सीएसएस का उपयोग करके रेडियो बटन के स्वरूप को अनुकूलित करने के लिए मेरी पसंदीदा विधियों में से एक के बारे में जानेंगे, जिससे अधिक उपयोगकर्ता-अनुकूल और दृश्यमान रूप से आकर्षक अनुभव तैयार होगा।   https://youtu.be/PlldXyuTnUw?embedable=true  आइए रेडियो बटन छिपाकर शुरुआत करें!  हमें रेडियो बटनों के लिए क्रॉस-ब्राउज़र स्टाइलिंग की सीमाओं को स्वीकार करके शुरुआत करने की आवश्यकता है। हालाँकि यह निराशाजनक है कि हम उन्हें सीधे स्टाइल नहीं कर सकते, हम वर्कअराउंड का उपयोग कर सकते हैं। इस उदाहरण में, पहला कदम वास्तविक रेडियो बटन इनपुट को छिपाना है। मैं जानता हूं कि यह अजीब लगता है, लेकिन हम जानते हैं कि हम उन्हें स्टाइल नहीं कर सकते, इसलिए हमें बस उन्हें समीकरण से बाहर निकालने की जरूरत है।  हालाँकि, इसे सुलभ तरीके से किया जाना चाहिए, यह सुनिश्चित करते हुए कि यह सभी उपयोगकर्ताओं के लिए कार्यात्मक बना रहे। इसे निम्नलिखित शैलियों के सेट का उपयोग करके प्राप्त किया जा सकता है जो सामग्री की उपयोगिता को बनाए रखते हुए उसे दृश्य रूप से छिपाते हैं:   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 रेडियो बटन की उपस्थिति को बदल सकते हैं!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

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

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps