Web sayfalarındaki onay kutuları - nasıl büyütülür?

Çoğu tarayıcıda oluşturulan standart onay kutuları oldukça küçüktür ve daha büyük bir yazı tipi kullanıldığında bile boyutları artmaz. Daha büyük onay kutularını görüntülemenin tarayıcıdan bağımsız en iyi yolu nedir?

Bunun herhangi birine yardımcı olabileceği durumda, işte bir atlama noktası olarak basit CSS. Arka plan renginde geçişli başparmaklar için yeterince büyük temel yuvarlak bir kareye dönüştürür.

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" />

Aslında onları büyütmenin bir yolu var, her şey gibi onay kutuları (facebook düğmesi gibi bir iframe bile).

Bunları "yakınlaştırılmış" bir öğeye sarın:

.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>

Biraz "yeniden ölçeklenmiş" görünebilir ama işe yarıyor.

Elbette bu div'i yüzer hale getirebilirsiniz: sola ve etiketinizi yanına koyun, float: sola da.

Bu CSS'yi deneyin

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

Ben değiştirmeyi denedim paddingve marginve sıra widthile heightve sonra nihayet sadece ölçek artarsa bu ödeme şekli olduğu saptanmıştır:

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

İşte en son tarayıcılarda (IE9 +), IE8 ve altını desteklemek için javascript ile geliştirilebilen bir yalnızca CSS çözümü olarak çalışan bir numara.

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

labelOnay kutusunun nasıl görünmesini istediğinizle stilini belirleyin

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

JavaScript için, durumu göstermek için etikete sınıflar ekleyebileceksiniz. Ayrıca, aşağıdaki işlevi kullanmak akıllıca olacaktır:

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

#checkboxIDStilleri değiştirmek için DÜZENLE

Bir telefon aralığı uygulaması yazıyorum ve onay kutularının boyutu, görünümü vb. Değişiklik gösteriyor. Bu yüzden kendi basit onay kutumu yaptım:

Önce HTML kodu:

<span role="checkbox"/>

Ardından CSS:

[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);
}

Onay kutusu durumunu değiştirmek için JQuery kullandım:

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

Ama onsuz da kolaylıkla yapılabilir ...

Umarım yardımcı olabilir!

Saf modern 2020 CSS , bulanık ölçeklendirme veya kullanışlı olmayan dönüştürme olmadan yalnızca karar. Ve kene ile! =)

Firefox ve Chromium tabanlı tarayıcılarda iyi çalışıyor.

Böylece, onay kutularınızı tamamen UYUMLU , sadece ana blokları ayarlayarak yönetebilirsiniz font-heightve metinle birlikte büyür!

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>