कभी-कभी जब हम फॉर्म बनाते हैं, तो हमें यूज़र प्रेफरेंस कलेक्ट करने, शर्तों से सहमत होने, या जनसांख्यिकीय डेटा के लिए चेकबॉक्स और रेडियो बटन इनपुट्स का उपयोग करने की आवश्यकता होती है। चेकबॉक्स या रेडियो बटन जैसे HTML इनपुट एलिमेंट्स का डिफ़ॉल्ट अपीयरेंस होता है। यदि आप अपीयरेंस को बिल्कुल भी बदलना चाहते हैं, तो आप CSS का उपयोग करके अपनी पसंद का लुक कस्टमाइज़ कर सकते हैं। यह लेख आपको अपने फॉर्म या वेब पेज के लिए चेकबॉक्स और रेडियो इनपुट को कस्टमाइज़ करने का एक नमूना दिखाएगा।
HTML सेटअप
HTML स्केलेटन कोड जिसे हम स्टाइल करेंगे, चेकबॉक्स और रेडियो बटन दोनों के लिए मूल रूप से समान है।
एक चेकबॉक्स/रेडियो बटन के लिए हमारा मुख्य कंटेनर HTML लेबल एलिमेंट होगा। उस लेबल के अंदर, हमारे पास उचित टाइप के साथ एक इनपुट एलिमेंट और एक स्पैन एलिमेंट होगा जो दिखाएगा कि एलिमेंट चुना गया है या नहीं।
<html> <head> <style> /* No CSS Here Yet. */ </style>> </head> <body> <h2>Radio Button and Checkbox CSS Example</h2> <label class="input">One <input type="radio" name="radio-example" checked="checked"> <span class="checkmark fill"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <script href="script.js"></script> </body> </html>
ऊपर मार्कअप में इनपुट्स का पहला सेट रेडियो बटन हैं। आप फॉर्म्स में रेडियो बटन्स का उपयोग करेंगे जब यूज़र को कई विकल्पों में से केवल एक चयन चुनने की आवश्यकता होती है।
दूसरा सेट चेकबॉक्स हैं। चेकबॉक्स का उपयोग तब किया जाता है जब यूज़र्स विकल्पों के चयन से कई विकल्प चुन सकते हैं यदि वे चाहें। इनका उपयोग उन बिंदुओं पर भी किया जाता है जहां एक यूज़र को केवल किसी चीज़ से सहमत/असहमत या हां/नहीं करने की आवश्यकता होती है।
इन HTML एलिमेंट्स का डिफ़ॉल्ट अपीयरेंस होता है। यदि आप उन्हें कस्टमाइज़ करना चाहते हैं, तो आप निश्चित रूप से ऐसा कर सकते हैं! आप स्टाइल एडजस्ट करने के लिए CSS का उपयोग कर सकते हैं:
CSS सेटअप
अपने रेडियो बटन्स या चेकबॉक्स की स्टाइलिंग बदलने के लिए, आपको समस्या को निम्न चरणों में तोड़ना होगा:
- लेबल कस्टमाइज़ करें
- डिस्प्ले प्रॉपर्टी
- पोजिशन रिलेटिव
- कर्सर पॉइंटर
- इसे सौंदर्य की दृष्टि से मनभावन बनाने के लिए मार्जिन और पैडिंग
- डिफ़ॉल्ट चेकबॉक्स छुपाएं
- डिस्प्ले प्रॉपर्टी
- एक कंटेनर बनाएं जो कस्टम चेकबॉक्स होगा
- हाइट
- विड्थ
- बैकग्राउंड
- पोजिशन – एब्सोल्यूट
- टॉप, लेफ्ट मान सेट
- होवर पर कुछ खास जोड़ें (यानी चेकबॉक्स का बैकग्राउंड कलर बदलें)
- बॉक्स या बटन चेक होने पर बैकग्राउंड कलर बदलें
- चेक न होने पर चेकमार्क या सर्कल छुपाएं
- चेक होने पर चेकमार्क या सर्कल दिखाएं
- चेकमार्क स्टाइल करें
- सर्कल स्टाइल करें
नीचे दिए गए कोड को देखने से पहले, मैं ऊपर दिए गए स्केलेटन HTML और समस्या को हल करने के चरणों के ब्रेकडाउन को देखते हुए इसे स्वयं समझने की कोशिश करने की सलाह दूंगा।
समाधान कोड:
<html> <head> <style> /* Customize the label (the input) */ label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox container */ .checkmark, .link { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* Add border radius for the radio button */ .circle { border-radius: 50%; } /* On mouse-over, add a background color */ label:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/circle (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark */ label .checkmark:after { left: 10px; top: 3px; width: 5px; height: 15px; border: solid white; border-width: 0 3px 3px 0; /* always check to see if you need to use the css browser prefixes */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the radio button circle */ label .circle:after { width: 15px; height: 15px; /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */ border: none; background: white; border-radius: 50%; left: 20%; top: 20%; } </style> </head> <body> <h2>CSS Radio Button and Checkbox Example</h2> <label class="input">One <input type="radio" name="radio-example" checked> <span class="checkmark circle"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example" checked> <span class="checkmark"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> <label class="input">Six <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> </body> </html>
यह रहा; CSS में रेडियो बटन्स और चेकबॉक्स के उदाहरण। यह पहली बार में आपके दिमाग में घूमने के लिए थोड़ा बहुत हो सकता है, लेकिन आप इसे समझ जाएंगे! यदि आप इस CSS अभ्यास को पूरा करने में सक्षम हैं, तो आप अधिक कठिन विषयों पर आगे बढ़ने के लिए तैयार हैं।
