जावास्क्रिप्ट के बिना सुंदर CSS3 के चेकबॉक्स और रेडियो बटन

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



डेमो डाउनलोड स्रोत

सबसे पहले, चलो एक सरल चेकबॉक्स बनाते हैं:

<input type="checkbox" id="c1" name="cc" /> <label for="c1"><span></span>Check Box 1</label> 

अब आपको चेकबॉक्स को छिपाने और चेक किए गए चेकबॉक्स / रेडियो बटन को प्रदर्शित करने के लिए स्प्राइट्स का उपयोग करने की आवश्यकता है:

 input[type="checkbox"] { display:none; } input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(check_radio_sheet.png) left top no-repeat; cursor:pointer; } 

यह केवल यह सब काम करने के लिए बनी हुई है। क्लिक करके, स्प्राइट को चिन्हित से चिन्हित और इसके विपरीत बदलना चाहिए:

 input[type="checkbox"] { display:none; } input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(check_radio_sheet.png) left top no-repeat; cursor:pointer; } input[type="checkbox"]:checked + label span { background:url(check_radio_sheet.png) -19px top no-repeat; } 

ब्राउज़र का समर्थन

छद्म-वर्ग, विशेष रूप से: चेक किए गए, अधिकांश ब्राउज़र में ठीक काम करते हैं, इंटरनेट एक्सप्लोरर 9 (और नीचे) और 6 संस्करण के नीचे आईओएस पर सफारी के अपवाद के साथ। इस प्रकार हमारा फॉर्म IE में प्रदर्शित होता है:



यह पोस्ट tutplus.com क्विक टिप: ईज़ी CSS3 चेकबॉक्स और रेडियो बटन पर आधारित पाठ के आधार पर लिखी गई थी।