त्वरित युक्ति: आसान CSS3 चेकबॉक्सेज़ और रेडियो बटन

() translation by (you can also view the original English article)

कभी आश्चर्य की बात है कि कैसे चेक बॉक्स और रेडियो बटन, लेकिन जावास्क्रिप्ट के बिना?आप कर सकते हैं CSS3 के लिए धन्यवाद! यहाँ हम क्या बनाने जा रहे हैं:

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

1. प्रक्रिया को समझना

अनुशंसित अध्ययन: 30 सीएसएस चयनकर्ताओं(सिलेक्टर) को याद रखना चाहिए

आप में से उन लोगों के लिए जो पहले से ही अपनी सीएसएस क्षमताओं में आत्मविश्वास महसूस करते हैं और सिर्फ सही दिशा में जाना चाहते हैं, यहाँ पूरे ट्यूटोरियल में सीएसएस की सबसे महत्वपूर्ण पंक्ति है:

1	input[type="checkbox"]:checked + label {
2
3	}

अब, आप में से उन लोगों के लिए जो आपको अधिक दिशा की आवश्यकता हो, डरे नहीं, आगे पढ़ें!

ठीक है, तो अब विषय पर वापस आते है। हम वास्तव में क्या कर रहे होंगे?खैर, CSS3 के निफ्टी के कारण थोड़ा :checked छद्म(सूडो) चयनकर्ता(सिलेक्टर), हम इसकी जाँच (या अनचेक) स्थिति के आधार पर एक तत्व को लक्षित करने में सक्षम हैं। हम तब सीएसएस(CSS) 2.1 से + आसन्न(अजैसन्ट) भाई चयनकर्ता(सिलेक्टर) का उपयोग सीधे चेकबॉक्स या रेडियो के बाद तत्व को लक्षित करने के लिए कर सकते हैं, जो हमारे मामले में लेबल है।

2. अपने HTML सेट करना

अब, हम अपने एचटीएमएल(HTML) और सीएसएस(CSS) फाइलें बनाकर शुरू कर देते हैं (या फिर आप अपनी शैलियों को संभालने के लिए पसंद करते हैं) और काम करने लगें।

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

ठीक है, हम वास्तव में शुरू करते हैं अभी, क्या हम? हम अपना चेकबॉक्स इनपुट बनाकर शुरू करते हैं, उसके बाद एक लेबल।

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

अब, यदि आप <label> तत्व के बारे में ज्यादा नहीं जानते हैं, तो आपको लेबल के माध्यम से इनपुट के साथ सहभागिता करने के लिए आपको इनपुट और लेबल को कनेक्ट करना होगा। इसका उपयोग for = "" और इनपुट का आईडी(ID) के लिए किया जाता है।

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

मैं लेबल के अंदर भी <span> जोड़ूंगा, जो कि कुछ और की तुलना में अधिक निजी प्राथमिकता है, लेकिन सभी चरण 3 में स्पष्ट हो जाएंगे।

3. हम यहाँ किसलीये हैं: सीएसएस

मज़ा यहां शुरू होता है। सबसे पहले हम जो करते हैं, जो इस पूरे ट्यूटोरियल का आधार है, वह वास्तविक चेकबॉक्स छुपाना है।

1	input[type="checkbox"] {
2	display:none;
3	}

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

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

ठीक है, मुझे इस जल्दी से स्पष्ट करता हूं।सबसे पहले, पृष्ठभूमि को नोटिस करें।मेरे पास इसके लिए एक छोटी सी स्प्राइट शीट है, इसलिए मुझे यह करना है कि इस अवधि में पृष्ठभूमि की स्थिति निर्धारित की गई है। यह span शीट में प्रत्येक "स्प्राइट" की सटीक चौड़ाई और ऊंचाई है, जिससे प्रत्येक राज्य को परिभाषित करना आसान हो जाता है।

ये मेरे स्टाइल के लिए, विशिष्ट बाकी सीएसएस(CSS) है। यह विशुद्ध रूप से सौंदर्यशास्त्र के लिए है और या तो मेरे स्वाद या इस डिजाइन के लिए विशिष्ट है।

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

4. यह काम करना

बहुत ज्यादा काम बाकी नहीं है, तो चलो इसे लपेटें। आखिरी चीज आपको करने की आवश्यकता होगी, जब तत्व की जांच की जाती है, और वैकल्पिक रूप से होवर पर भी तत्व के लिए एक राज्य प्रदान करता है।यह काफी सरल है, बस एक नज़र दौराए!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 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;
}

ध्यान दें कि क्योंकि मैंने एक स्प्राइट शीट का इस्तेमाल किया था, मुझे जो करना है पृष्ठभूमि की स्थिति को बदलना है। नोटिस करे, यह भी कि मुझे जब चेक बॉक्स / रेडियो बटन "चेक" किया गया था, तब लेबल के स्पेल को शैली में करना था, वह CSS3 का उपयोग किया गया था :check छद्म(सूडो ) चयनकर्ता(सिलेक्टर)।

ब्राउज़र समर्थन पर त्वरित नोट

छद्म चयनकर्ताओं(सूडो सिलेक्टर) को सभी ब्राउज़रों में बहुत अच्छा समर्थन मिलता है, लेकिन सामान्य चेतावनियां लागू होती हैं, और फ़ॉलबैक बहुत सुन्दर है:

Can I use data for pseudo selectors — क्या मैं सामान्य छद्म चयनकर्ताओं(सूडो सिलेक्टर) के लिए डेटा का उपयोग कर सकता हूं?

IE9 on Windows 7 — फ़ॉलबैक: विंडोज 7 पर आईई9(IE9)

प्रारंभिक मोबाइल ब्राउज़र भी एक मुद्दा हैं - का समर्थन :checked किया गया अस्पष्ट है।उदाहरण के लिए IOS 6 से मोबाइल सफारी इसका समर्थन नहीं करता।

निष्कर्ष

ठीक है, इसलिए हमने किया, सही? ठीक है, चलो बस डबल चेक करें। पहले एचटीएमएल:

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

क्या आपका वही दिखता है? उस <span> में जोड़ने के लिए मत भूलना !अपने आप से इस के साथ प्रयोग करते समय, मैं इस हिस्से को करने के नए या अलग तरीके खोजने का सुझाव देता हूं। मुझे यह देखना अच्छा लगेगा कि आप इसे और अधिक कुशल बनाने के लिए क्या करते हैं। अब सीएसएस के लिए:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 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;
}

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

अंत में, सबसे महत्वपूर्ण बात यह है कि आप इस से दूर ले जा सकते हैं सीएसएस की पहली पंक्ति मैं बहुत शीर्ष पर लिखा है:

1	input[type="checkbox"]:checked + label {
2
3	}

इसका उपयोग करके, आप पूरी तरह से अलग चीजें बना सकते हैं। साथ संभावनाएं :checked चेकबॉक्स और फ़ॉर्म में उपयोग के लिए रेडियो से आगे की जाँच करें, लेकिन मैं आपको स्वयं के साथ प्रयोग करने के लिए छोड़ दूँगा। प्रयोग करने के लिए कुछ चीजें:

रेटिना स्क्रीन के लिए 2x स्प्राइटशीट जोड़ें
बिटमैप के बजाय एसवीजी(SVG) का उपयोग करें

मुझे आशा है कि आप इस छोटे लेख का आनंद लेंगे और मुझे आशा है कि आप जो भी देखते हैं वह आप लेते हैं और उस पर विस्तार या सुधार करते हैं!