कभी-कभी जब हम फ़ॉर्म बनाते हैं, तो हमें उपयोगकर्ता प्राथमिकताएं, शर्तों से सहमत होने, या जनसांख्यिकीय डेटा एकत्र करने के लिए चेकबॉक्स और रेडियो बटन इनपुट का उपयोग करने की आवश्यकता होती है। चेकबॉक्स या रेडियो बटन जैसे 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>
उपरोक्त मार्कअप में इनपुट का पहला सेट रेडियो बटन हैं। जब उपयोगकर्ता को केवल एक choose चुनने की आवश्यकता होगी, तो आप प्रपत्रों के लिए रेडियो बटन का उपयोग करेंगे कई विकल्पों में से चयन।
दूसरा सेट चेकबॉक्स है। चेकबॉक्स का उपयोग तब किया जाता है जब उपयोगकर्ता पसंद के चयन में से कई विकल्पों का चयन कर सकते हैं। उनका उपयोग उन बिंदुओं पर भी किया जाता है जहां उपयोगकर्ता को किसी बात से सहमत/असहमत या हां/नहीं की आवश्यकता होती है।
इन HTML तत्वों में डिफ़ॉल्ट दिखावट होती है। यदि आप उन्हें अनुकूलित करना चाहते हैं, तो आप निश्चित रूप से ऐसा कर सकते हैं! आप शैली को समायोजित करने के लिए CSS का उपयोग कर सकते हैं:
सीएसएस सेटअप
अपने रेडियो बटन या अपने चेकबॉक्स की शैली को बदलने के लिए, आपको निम्न चरणों में समस्या का विश्लेषण करना होगा:
- लेबल को अनुकूलित करें
- प्रदर्शन संपत्ति
- स्थिति संबंधी
- कर्सर पॉइंटर
- मार्जिन और पैडिंग इसे सौंदर्य की दृष्टि से आकर्षक बनाने के लिए
- डिफ़ॉल्ट चेकबॉक्स छुपाएं
- प्रदर्शन संपत्ति
- एक कंटेनर बनाएं जो कस्टम चेकबॉक्स होगा
- ऊंचाई
- चौड़ाई
- पृष्ठभूमि
- स्थिति – पूर्ण
- शीर्ष, बाएं मान सेट
- कुछ विशेष जोड़ें जो होवर पर होगा (यानी चेकबॉक्स का पृष्ठभूमि रंग बदलें)
- बॉक्स या बटन चेक होने पर बैकग्राउंड का रंग बदलें
- चेक न होने पर चेकमार्क या सर्कल छिपाएं
- चेक किए जाने पर चेकमार्क या सर्कल दिखाएं
- चेकमार्क को स्टाइल करें
- मंडली को स्टाइल करें
नीचे दिए गए कोड को देखने से पहले, मैं अनुशंसा करता हूं कि आप इसे कंकाल HTML और ऊपर की समस्या को हल करने के लिए चरणों के टूटने के बाद इसे स्वयं समझने का प्रयास करें।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
समाधान कोड:
<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 में रेडियो बटन और चेकबॉक्स के उदाहरण। यह आपके दिमाग को पहली बार में लपेटने के लिए थोड़ा सा हो सकता है, लेकिन आप इसे प्राप्त करेंगे! यदि आप इस सीएसएस अभ्यास के माध्यम से प्राप्त करने में सक्षम हैं, तो आप अधिक कठिन विषयों पर आगे बढ़ने के लिए तैयार हैं।