2014-08-28 3 views
26

के साथ चेक बॉक्स आकार परिवर्तन चेक क्लास और आईडी के बिना मैं चेक बॉक्स आकार (ग्लोबली) कैसे बदल सकता हूं? क्या यह इस तरह से अलग तरीके से करना संभव है:सीएसएस

input[type=checkbox] { 
    zoom: 1.5; 
} 
+0

और यह दृष्टिकोण आपके लिए क्यों काम नहीं करता है? –

उत्तर

50

input फ़ील्ड आपकी इच्छानुसार स्टाइल की जा सकती हैं। तो ज़ूम के बजाय, आप हो सकता था

input[type="checkbox"]{ 
    width: 30px; /*Desired width*/ 
    height: 30px; /*Desired height*/ 
} 

संपादित करें:

आप इस तरह अतिरिक्त नियम जोड़ना होगा:

input[type="checkbox"]{ 
    width: 30px; /*Desired width*/ 
    height: 30px; /*Desired height*/ 
    cursor: pointer; 
    -webkit-appearance: none; 
    appearance: none; 
} 

चेक इस बेला http://jsfiddle.net/p36tqqyq/1/

+0

मुझे लगता है कि मैं इसे अपनी वेबसाइट पर उपयोग करता हूं ... – Charleshaa

+0

जांचने में गलत हो सकता है यह काम मैं सिर्फ – Klapsius

+0

जांचता हूं; मैंने अपने परीक्षणों में '150%' का उपयोग करके परीक्षण किया जो चेकबॉक्स को बड़े क्षेत्र में ले जाया गया लेकिन उसी आकार में शेष रहा। 'Px' का उपयोग करके वास्तव में चेकबॉक्स का आकार बदल जाता है। इससे पहले टिप्पणी वापस ले ली गई। –

20

आप ऐसा करना चाहेंगे।

input[type=checkbox] { 

-ms-transform: scale(2); /* IE */ 
-moz-transform: scale(2); /* FF */ 
-webkit-transform: scale(2); /* Safari and Chrome */ 
-o-transform: scale(2); /* Opera */ 
    padding: 10px; 
} 
+0

यह स्वीकार्य उत्तर कैसे नहीं है? – Rap

+9

समाधान मैक से क्रोम पर समस्या है। चेकबॉक्स –

+3

धुंधला है आप शायद ऐसा करना चाहते हैं, लेकिन शायद आप नहीं करते हैं। यह अत्यधिक पिक्सलेटेड है और अधिकांश अनुप्रयोगों के लिए स्वीकार्य नहीं है। – losmescaleros

8

इस

प्रयास करें
<input type="checkbox" style="zoom:1.5;" /> 
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */ 
+1

फ़ायरफ़ॉक्स के लिए काम नहीं करता है –