Kotak centang di halaman web - bagaimana cara membuatnya lebih besar?

Kotak centang standar yang ditampilkan di sebagian besar browser cukup kecil dan ukurannya tidak bertambah bahkan saat font yang lebih besar digunakan. Apa cara terbaik dan tidak tergantung browser untuk menampilkan kotak centang yang lebih besar?

Jika ini dapat membantu siapa pun, berikut CSS sederhana sebagai titik awal. Mengubahnya menjadi persegi bundar dasar yang cukup besar untuk ibu jari dengan warna latar belakang yang berubah-ubah.

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

Sebenarnya ada cara untuk membuatnya lebih besar, centang kotak seperti yang lain (bahkan iframe seperti tombol facebook).

Gabungkan mereka dalam elemen "diperbesar":

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

Ini mungkin terlihat sedikit "diubah ukurannya" tetapi berhasil.

Tentu saja Anda dapat membuat div float: left dan meletakkan label Anda di sampingnya, float: left juga.

Coba CSS ini

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

Saya mencoba mengubah paddingdan margindan serta widthdan height, dan akhirnya menemukan bahwa jika Anda meningkatkan skala, itu akan berhasil:

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

Berikut adalah trik yang berfungsi di browser terbaru (IE9 +) sebagai solusi khusus CSS yang dapat ditingkatkan dengan javascript untuk mendukung IE8 dan di bawahnya.

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

Atur gaya labeldengan tampilan kotak centang yang Anda inginkan

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

Untuk javascript, Anda dapat menambahkan kelas ke label untuk menunjukkan status. Selain itu, sebaiknya gunakan fungsi berikut:

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

EDIT untuk mengubah #checkboxIDgaya

Saya menulis aplikasi phonegap, dan kotak centang bervariasi dalam ukuran, tampilan, dll. Jadi saya membuat kotak centang sederhana saya sendiri:

Pertama kode HTML:

<span role="checkbox"/>

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

Untuk mengaktifkan status kotak centang, saya menggunakan JQuery:

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

Tetapi itu dapat dengan mudah dilakukan tanpa itu ...

Semoga bisa membantu!

Hanya CSS 2020 modern murniKeputusan , tanpa penskalaan kabur atau transformasi yang tidak berguna. Dan dengan centang! =)

Berfungsi bagus di browser berbasis Firefox dan Chromium.

Jadi, Anda dapat mengatur kotak centang Anda sepenuhnya ADAPTIF , hanya dengan menyetel blok induk font-heightdan itu akan berkembang dengan teks!

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>