वेब पेज में चेकबॉक्स - उन्हें बड़ा कैसे बनाया जाए?

Question

अधिकांश ब्राउज़रों में दिए गए मानक चेकबॉक्स काफी छोटे हैं और बड़े फ़ॉन्ट का उपयोग करने पर भी आकार में वृद्धि नहीं करते हैं। बड़ा चेकबॉक्स प्रदर्शित करने के लिए सबसे अच्छा, ब्राउज़र-स्वतंत्र तरीका क्या है?

Answer 1

यदि यह किसी की मदद कर सकता है, तो यहां एक सरल सीएसएस एक जंपिंग पॉइंट के रूप में है। यह एक मूल गोल वर्ग में बदल जाता है जो अंगूठे वाले पृष्ठभूमि रंग के साथ अंगूठे के लिए काफी बड़ा होता है।

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

<input type="checkbox" />

Comments

@GabrielW यह सही है। बस दूसरों के लिए समकक्ष का उपयोग करें

— taylorcressy

@taylorcressy IE को छोड़कर (भी IE 11) caniuse.com/#search=Appearance - लेकिन अन्य ब्राउज़रों के लिए ठीक काम किया। धन्यवाद!

— कोडब्राउर

अच्छा होगा अगर अंदर भी कोई टिक हो :)

— robert

@Paul: साझा करने के लिए धन्यवाद। मैं सोच रहा था कि आप चेकमार्क दिखाने से कैसे निपटेंगे। पृष्ठभूमि केवल एक रंग के लिए सेट के साथ, बॉक्स में सफेद चेकमार्क दिखाई नहीं देता है। क्या कोई आसान उपाय है? मैंने जाँच के लिए एक html इकाई जोड़ने की कोशिश की है: इससे पहले, लेकिन अगर कोई विकल्प है तो सोच रहा हूँ

— PBandJen

मैंने चेक किए गए बैकग्राउंड कलर के लिए एक गहरे रंग का इस्तेमाल किया और "चेक" के बिना यह इतना बुरा नहीं है

— जेआर लॉरॉर्न

Answer 2

वास्तव में उन्हें बड़ा बनाने का एक तरीका है, चेकबॉक्स कुछ और (यहां तक ​​कि एक फेसबुक बटन की तरह एक iframe)।

उन्हें "ज़ूम" तत्व में लपेटें:

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

यह थोड़ा "rescaled" लग सकता है लेकिन यह काम करता है।

बेशक आप उस div float: left को बना सकते हैं और इसके अलावा अपना लेबल लगा सकते हैं, float: left भी।

Comments

ध्यान दें कि फ़ायरफ़ॉक्स पर (संस्करण 36 के अनुसार), इसके परिणामस्वरूप बहुत धुंधली उपस्थिति होगी। यह क्रोम में अच्छी तरह से तराजू है, हालांकि। डेमो: jsfield.net/tzp858j3

— कैट

वहाँ कोई बेहतर उपाय है जो छोटा नहीं दिखता है?

— बेसजेरो

नहीं किया जा सकता zoom: 2और transform: scale(2)सीधे चेकबॉक्स के लिए लागू किया जा सकता है? इसे एक आवरण की आवश्यकता क्यों है?

— एताव 32

धन्यवाद! ऐसा लगता है कि आपका कोड अधिक ब्राउज़रों को ध्यान में रखता है, तब मैं कभी भी परीक्षण कर सकता था, लेकिन यह मेरे द्वारा की गई हर चीज पर काम करता है। मेरे आई-फोन पर विशेष रूप से अच्छा है, जहां चेकबॉक्स केवल डॉट्स बन जाते हैं! BTW, आप छोटे फ्रैक्शनल स्केलिंग (जैसे 1.5) को उन जगहों पर रख सकते हैं जहां यह स्निप "2" और मध्यम आकार के चेकबॉक्स के लिए है।

— रैंडी

Answer 3

इस सीएसएस की कोशिश करो

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

Comments

पूरी तरह से क्रॉस-ब्राउज़र नहीं (यह HTML में क्लास सेट करना और CSS में क्लास सिलेक्टर का उपयोग करना बेहतर है), लेकिन यह मेरे लिए एक बेहतर समाधान हो सकता है। +1

— हरमन

मैं उदाहरण के उद्देश्यों के लिए चौड़ाई और ऊंचाई का उपयोग कर रहा था। संभवत: हरमन और मेरा समाधान का एक संयोजन रास्ता है क्योंकि आपको सीएसएस की तुलना में अधिक स्टाइलिंग की आवश्यकता हो सकती है।

— कोलिन व्हाइट

यह केवल कुछ ब्राउज़रों में काम करेगा, और कई आधुनिक लोगों में नहीं।

— आरजे ओवेन

यह आईपैड सफारी पर काम करता है जहां चेकबॉक्स को अक्सर उपयोगकर्ताओं को क्लिक करने में आसान बनाने के लिए बड़ा होना पड़ता है।

— user3032973

प्रमुख सीमा यह है कि यह फ़ायरफ़ॉक्स (फ़ायरफ़ॉक्स 36 के रूप में) में बिल्कुल भी काम नहीं करता है और वास्तव में काफी अस्वाभाविक लगेगा (चेकबॉक्स नियमित आकार का है लेकिन इसके चारों ओर पैडिंग 100 x 100px क्षेत्र को भरता है।

— कैट

Answer 4

मैं बदल रहा करने की कोशिश की paddingऔर marginऔर साथ ही widthऔर heightहै, और फिर अंत में पाया गया कि अगर आप सिर्फ पैमाने में वृद्धि यह काम करेंगे:

input[type=checkbox] {
    transform: scale(1.5);
}

Answer 5

यहां एक ट्रिक है जो सीएसएस केवल एक समाधान के रूप में सबसे हालिया ब्राउज़रों (IE9 +) में काम करता है जिसे IE8 और नीचे का समर्थन करने के लिए जावास्क्रिप्ट के साथ सुधार किया जा सकता है।

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

labelआप जिस चेकबॉक्स को देखना चाहते हैं, उसके साथ स्टाइल करें

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

जावास्क्रिप्ट के लिए, आप राज्य को दिखाने के लिए लेबल में कक्षाएं जोड़ पाएंगे। इसके अलावा, निम्नलिखित कार्य का उपयोग करना बुद्धिमानी होगी:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

#checkboxIDशैलियों को संशोधित करने के लिए संपादित करें

Comments

देख इस तकनीक के लिए फुल सोर्स कोड के लिंक के लिए stackoverflow.com/a/3772914/190135

— एलेक्सचैफी

Answer 6

मैं writtinga फोनगैप ऐप हूं, और चेकबॉक्स आकार, रूप आदि में भिन्न हैं, इसलिए मैंने अपना खुद का साधारण चेकबॉक्स बनाया:

पहले HTML कोड:

<span role="checkbox"/>

फिर सीएसएस:

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

चेकबॉक्स स्थिति को टॉगल करने के लिए, मैंने JQuery का उपयोग किया:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

लेकिन यह आसानी से इसके बिना किया जा सकता है ...

आशा है कि यह मदद कर सकता है!

Answer 7

शुद्ध आधुनिक 2020 सीएसएस केवल निर्णय, बिना धुंधली स्केलिंग या गैर-सुविधाजनक रूपांतरण के। और टिक के साथ! =)

फ़ायरफ़ॉक्स और क्रोमियम-आधारित ब्राउज़रों में अच्छा काम करता है।

तो, आप अपने चेकबॉक्स को शुद्ध रूप से ADAPTIVE कर सकते हैं , बस पेरेंट ब्लॉक सेट करके font-heightऔर यह टेक्स्ट के साथ बढ़ेगा!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}

<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>