मैं एक चेकबॉक्स कैसे बड़ा कर सकता हूं?

Question

मेरा वेब पेज चेकबॉक्स का उपयोग करता है। वे बहुत छोटे दिखाई देते हैं। मैंने "फ़ॉन्ट आकार: 1.5em" का उपयोग कर उन्हें बड़ा बनाने की कोशिश की। यह उन्हें बिल्कुल बदलना प्रतीत नहीं होता था।

क्या कोई आसान तरीका है कि मैं एक चेकबॉक्स बड़ा कर सकता हूं?

धन्यवाद,

Answer 1

आप अधिकांश ब्राउज़रों में चेक बॉक्स की उपस्थिति को नहीं बदल सकते हैं। इसे जांचें: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

कोई तत्व जोड़ने का प्रयास करें और इसे चेकबॉक्स की स्थिति बदलें। उदाहरण के लिए इसे जांचें: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 2

आप छवियों का उपयोग करके ऐसा कर सकते हैं।

सीएसएस

#mycheckbox 
{ 
    display: none; 
} 

#mycheckbox + label 
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/photo_of_big_unchecked_box.png'); 
} 

#mycheckbox:checked + label 
{ 
    background: url('/path/to/photo_of_big_checked_box.png'); 
} 

एचटीएमएल

<input type="checkbox" name="mycheckbox" id="mycheckbox"><label for="mycheckbox"></label> 

एक तरह से आप लक्ष्य को पूरा हो सकता है यही कारण है कि।

संपादित

Here आईई

Answer 3

के लिए कार्यशील लिंक दुर्भाग्य से, सीएसएस थोड़े <input> उन्हें सीमित संशोधित करने की संभावनाओं बनाने के साथ अपरिभाषित है। विभिन्न ब्राउज़र अलग-अलग काम करते हैं। width और height व्यावहारिक रूप से केवल इंटरनेट एक्सप्लोरर में चेकबॉक्स पर काम करते हैं।

विभिन्न समाधान सामने आए, उदाहरण के लिए emulating checkboxes using JS, so those can be styled।

Answer 4

जैसा कि आप Ryan Fait describes in his blog जैसे कुछ का उपयोग करने के लिए चेकबॉक्स को क्रॉस ब्राउज़र संगत की उपस्थिति को बदल नहीं सकते हैं। यह तकनीक आपको अपने चेकबॉक्स के लिए कस्टम ग्राफिक्स का उपयोग करने की अनुमति देती है।

---

Answer 5

शायद यह एक छोटे से भी स्पष्ट लगता है, लेकिन यह काम करता है:

input[type='checkbox'] { 
    width: 30px; 
    height: 30px;   
} 

यह काम करता है के रूप में आप IE और क्रोम पर उम्मीद कर सकते हैं, और यह नहीं लगती है, भले ही है जैसे कि यह Firefox पर बड़ा है

Answer 6

आप सीएसएस ज़ूम टैग का उपयोग कर सकते हैं: आप अभी भी एक बड़ा हिट बॉक्स मिलता है।

h6 { 
 
    zoom: 5; 
 
}

<h6><input type="checkbox"></h6>