Cara mendesain kotak centang menggunakan CSS


831

Saya mencoba merancang kotak centang menggunakan yang berikut ini:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Namun gaya tersebut tidak diterapkan. Kotak centang masih menampilkan gaya standarnya. Bagaimana cara memberikan gaya yang ditentukan?



1
Saya pikir Anda mencari sesuatu seperti ini: asimishaq.com/myfiles/image-checkbox Lihat posting ini: stackoverflow.com/questions/16352864/…
asim-ishaq


1
tautannya ada di komentar di atas. tetap: blog.felixhagspiel.de/index.php/posts/custom-inputs
Felix Hagspiel

1
Wow. Melihat semua jawaban ini saya hanya harus mengatakan, Semua ini bekerja hanya untuk meletakkan kotak centang bergaya di layar
Michael

Jawaban:


784

MEMPERBARUI:

Jawaban di bawah ini merujuk pada keadaan sebelum ketersediaan luas dari CSS 3. Di browser modern (termasuk Internet Explorer 9 dan yang lebih baru), lebih mudah untuk membuat penggantian kotak centang dengan gaya yang Anda sukai, tanpa menggunakan JavaScript.

Berikut ini beberapa tautan bermanfaat:

Perlu dicatat bahwa masalah mendasar tidak berubah. Anda masih tidak dapat menerapkan gaya (batas, dll.) Langsung ke elemen kotak centang dan memiliki gaya yang mempengaruhi tampilan kotak centang HTML. Apa yang telah berubah, bagaimanapun, adalah bahwa sekarang mungkin untuk menyembunyikan kotak centang yang sebenarnya dan menggantinya dengan elemen gaya Anda sendiri, hanya menggunakan CSS. Khususnya, karena CSS sekarang memiliki :checkedpemilih yang didukung secara luas , Anda dapat membuat penggantian Anda dengan benar mencerminkan status kotak yang dicentang.


JAWABAN TUA

Inilah artikel yang berguna tentang kotak centang styling . Pada dasarnya, penulis menemukan bahwa itu sangat bervariasi dari peramban ke peramban, dan banyak peramban selalu menampilkan kotak centang default, tidak peduli bagaimana Anda mengaturnya. Jadi sebenarnya tidak ada cara yang mudah.

Tidak sulit untuk membayangkan solusi di mana Anda akan menggunakan JavaScript untuk overlay gambar pada kotak centang dan klik pada gambar itu menyebabkan kotak centang yang sebenarnya diperiksa. Pengguna tanpa JavaScript akan melihat kotak centang default.

Diedit untuk menambahkan: inilah skrip bagus yang melakukan ini untuk Anda ; itu menyembunyikan elemen kotak centang nyata, menggantinya dengan rentang gaya, dan mengarahkan kembali peristiwa klik.


34
Jawaban ini semakin tua! Tautan utama mengarah ke situs yang membandingkan gaya IE6 dan IE7 ...
Jonatan Littke

7
Titik adil - dan titik dasar tidak benar lagi, di peramban modern. Saya telah memperbarui dengan beberapa tautan yang lebih baru, tetapi meninggalkan yang asli sebagai sumber daya untuk browser lama.
Jacob Mattison

3
Easy CSS Checkbox Generator , sangat mudah dan ramah n00b. Hadir dengan GUI untuk kreasi yang disesuaikan juga! Sangat dihargai. :)
CᴴᴀZ

Saya tertarik pada jawaban lama karena saya ingin fitur ini kompatibel dengan IE8 + & browser lainnya (chrome, firefox & safari). Namun saya tidak dapat menemukan banyak umpan balik mengenai plugin yang Anda rekomendasikan ryanfait.com/resources/custom-checkboxes-and-radio-buttons
Adrien Be

2
Ini bukan jawaban yang sangat berguna - ini hanya daftar artikel, yang sebagian besar sudah sangat tua sekarang.
Steve Bennett

141

Ada cara untuk melakukan ini hanya dengan menggunakan CSS. Kita dapat (ab) menggunakan labelelemen dan gaya elemen itu sebagai gantinya. Peringatannya adalah bahwa ini tidak akan berfungsi untuk Internet Explorer 8 dan versi yang lebih rendah.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>


@ GandalfStormCrow ini akan berfungsi untuk browser apa pun yang mendukung: -severed pseudo-class, yang TIDAK didukung oleh IE8. Anda dapat memeriksa apakah ini berfungsi dengan selectivizr.com - yang menambahkan dukungan untuk: dicentang dan teman-teman.
Blake Pettersson

Dengan kata lain, IE9 dan versi yang lebih baru mendukung: dicentang.
Blake Pettersson

1
Ada polyfill untuk IE8 dan di bawah ini: github.com/rdebeasi/checked-polyfill
Tim

Ini bekerja, tetapi pertama kali berkedip. Mengapa ini terjadi?
Technophyle

Saya percaya tersembunyi inputtidak pernah mengambil fokus keyboard, jadi ini tidak terjangkau oleh keyboard.
sam

139

Anda dapat mencapai efek kotak centang kustom yang cukup keren dengan menggunakan kemampuan baru yang datang dengan kelas :afterdan :beforepseudo. Keuntungannya adalah: Anda tidak perlu menambahkan apa pun ke DOM, hanya kotak centang standar.

Perhatikan ini hanya akan berfungsi untuk browser yang kompatibel. Saya percaya ini terkait dengan fakta bahwa beberapa browser tidak memungkinkan Anda untuk mengatur :afterdan :beforememasukkan elemen. Yang sayangnya berarti untuk saat ini hanya browser WebKit yang didukung. Firefox + Internet Explorer masih akan memungkinkan kotak centang berfungsi, hanya dihapus, dan ini mudah-mudahan akan berubah di masa mendatang (kode tidak menggunakan awalan vendor).

Ini adalah solusi browser WebKit saja (Chrome, Safari, browser Mobile)

Lihat Contoh Biola

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});
/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Bonus gaya Webkit flipswitch biola

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});
body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>


9
Firefox 33.1 / Linux: Biola hanya menunjukkan kotak centang default. Tidak ada yang terlihat berbeda.
robsch

1
@robsch Ini jelas ditunjukkan di pos asli. Versi firefox atau OS tidak relevan, tidak berfungsi di firefox. "FF + IE masih akan memungkinkan kotak centang berfungsi, hanya un-style ..."
Josh Mc

Pendekatan yang bagus. Tetapi tidak semua browser melakukannya dengan baik. Hanya Chrome yang memiliki output terbaik sejauh yang saya periksa.
EA

Sangat bagus. Namun ... Ini lagi-lagi pendekatan IE 5.x. Hanya webkit. Karena itu tidak selalu mengikuti aturan ... Itulah seluruh masalah dengan browser webkit.
Alex

1
Solusi terbaik! +1 Tapi saya tidak melihat alasan untuk menulis contoh sebesar ini. 30 baris untuk menggambarkan ide itu sudah cukup.
Andrii Bogachenko

136

Sebelum Anda mulai (per Jan 2015)

Pertanyaan dan jawaban asli sekarang ~ 5 tahun. Dengan demikian, ini adalah sedikit pembaruan.

Pertama, ada sejumlah pendekatan ketika datang ke styling kotak centang. prinsip dasarnya adalah:

  1. Anda harus menyembunyikan kontrol kotak centang default yang ditata oleh browser Anda, dan tidak dapat diganti dengan cara apa pun yang berarti menggunakan CSS.

  2. Dengan kontrol yang disembunyikan, Anda masih harus dapat mendeteksi dan mengganti status yang dicentang

  3. Status kotak centang yang dicentang perlu direfleksikan dengan menata elemen baru

Solusinya (pada prinsipnya)

Hal di atas dapat dilakukan dengan sejumlah cara - dan Anda akan sering mendengar menggunakan elemen pseudo CSS3 adalah cara yang benar. Sebenarnya, tidak ada cara benar atau salah, itu tergantung pada pendekatan yang paling cocok untuk konteks Anda akan menggunakannya. Yang mengatakan, saya punya yang lebih disukai.

  1. Bungkus kotak centang Anda dalam sebuah labelelemen. Ini berarti bahwa meskipun tersembunyi, Anda masih dapat mengaktifkan statusnya untuk mengklik di mana saja di dalam label.

  2. Sembunyikan kotak centang Anda

  3. Tambahkan elemen baru setelah kotak centang yang akan Anda gaya sesuai. Itu harus muncul setelah kotak centang sehingga dapat dipilih menggunakan CSS dan gaya tergantung pada :checkednegara. CSS tidak dapat memilih 'mundur'.

Solusinya (dalam kode)

Penyempitan (menggunakan ikon)

Tapi hey! Saya mendengar Anda berteriak. Bagaimana jika saya ingin menunjukkan tanda centang kecil atau tanda silang di kotak? Dan saya tidak ingin menggunakan gambar latar belakang!

Nah, di sinilah elemen pseudo CSS3 bisa ikut berperan. Ini mendukung contentproperti yang memungkinkan Anda untuk menyuntikkan ikon Unicode yang mewakili kedua negara. Atau, Anda dapat menggunakan sumber ikon font pihak ketiga seperti font yang mengagumkan (meskipun pastikan Anda juga mengatur yang relevan font-family, misalnya untuk FontAwesome)

label input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}
<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>


14
Kecuali untuk: HTML yang disederhanakan, CSS yang disederhanakan, penjelasan terperinci.
SW4

4
@AnthonyHayward - jawaban yang diperbarui, ini adalah karena menggunakan tampilan: tidak ada yang tidak instantiate kontrol dengan cara tabbable, saya telah berubah
SW4

1
Saya kesulitan menemukan contoh di mana kotak centang berada di dalam label daripada sebelum / sesudahnya. Ini adalah solusi yang didokumentasikan dan dijelaskan dengan sangat baik. Alangkah
baiknya

1
Masih belum bisa tabbable dengan display: none.
sam

2
Ganti visibility: hidden;dengan opacity: 0 !important;jika Anda masih mengalami masalah dengan tab.
jabacchetta

40

Saya akan mengikuti saran jawaban SW4 - untuk menyembunyikan kotak centang dan untuk menutupinya dengan rentang kustom, menyarankan HTML ini:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

Label bungkus dengan rapi memungkinkan mengklik teks tanpa perlu menghubungkan atribut "untuk-id". Namun,

Jangan menyembunyikannya menggunakan visibility: hiddenataudisplay: none

Ini bekerja dengan mengklik atau mengetuk, tetapi itu adalah cara lumpuh untuk menggunakan kotak centang. Beberapa orang masih menggunakan jauh lebih efektif Tabuntuk memindahkan fokus, Spacemengaktifkan, dan bersembunyi dengan metode yang menonaktifkannya. Jika formulirnya panjang, seseorang akan menyimpan pergelangan tangan seseorang untuk digunakan tabindexatau accesskeyatribut. Dan jika Anda mengamati perilaku kotak centang sistem, ada bayangan yang layak di hover. Kotak centang yang ditata dengan baik harus mengikuti perilaku ini.

Jawaban cobberboy merekomendasikan Font Awesome yang biasanya lebih baik daripada bitmap karena font adalah vektor yang dapat diskalakan. Bekerja dengan HTML di atas, saya menyarankan aturan CSS ini:

  1. Sembunyikan kotak centang

    input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    Saya menggunakan hanya negatif z-indexkarena contoh saya menggunakan kulit kotak centang yang cukup besar untuk menutupnya sepenuhnya. Saya tidak merekomendasikan left: -999pxkarena tidak dapat digunakan kembali di setiap tata letak. Jawaban Bushan wagh menyediakan cara antipeluru untuk menyembunyikannya dan meyakinkan browser untuk menggunakan tabindex, jadi itu adalah alternatif yang baik. Pokoknya, keduanya hanya hack. Cara yang tepat hari ini adalah appearance: none, lihat jawaban Joost :

    input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
  2. Label kotak centang gaya

    input[type="checkbox"] + span {
      font: 16pt sans-serif;
      color: #000;
    }
  3. Tambahkan skin kotak centang

    input[type="checkbox"] + span:before {
      font: 16pt FontAwesome;
      content: '\00f096';
      display: inline-block;
      width: 16pt;
      padding: 2px 0 0 3px;
      margin-right: 0.5em;
    }

    \00f096adalah Font Awesome's square-o, padding disesuaikan untuk memberikan garis putus-putus pada fokus (lihat di bawah).

  4. Tambahkan kotak centang kulit yang dicentang

    input[type="checkbox"]:checked + span:before {
      content: '\00f046';
    }

    \00f046adalah Font Awesome's check-square-o, yang tidak sama lebar square-o, yang merupakan alasan untuk gaya lebar di atas.

  5. Tambahkan garis fokus

    input[type="checkbox"]:focus + span:before {
      outline: 1px dotted #aaa;
    }

    Safari tidak menyediakan fitur ini (lihat komentar @Jason Sankey), Anda harus menggunakannya window.navigatoruntuk mendeteksi browser dan melewatkannya jika itu adalah Safari.

  6. Tetapkan warna abu-abu untuk kotak centang yang dinonaktifkan

    input[type="checkbox"]:disabled + span {
      color: #999;
    }
  7. Atur hover shadow pada kotak centang non-cacat

    input[type="checkbox"]:not(:disabled) + span:hover:before {
      text-shadow: 0 1px 2px #77F;
    }

Demo Fiddle

Cobalah untuk mengarahkan mouse ke kotak centang dan gunakan Tabdan Shift+ Tabuntuk memindahkan dan Spaceberalih.


3
Suara positif untuk membahas masalah fokus: penyesuaian seperti ini seharusnya tidak menghilangkan fungsionalitas dasar. Perhatikan bahwa Safari tidak memberikan fokus keyboard ke kotak centang (bahkan yang default), yang membingungkan saya sejenak ketika menerapkan solusi yang termasuk penanganan fokus.
Jason Sankey

Ini tampaknya kotak centang di potongan tidak bekerja lagi? Pada jendela krom 10
Félix Gagnon-Grenier

1
Jawaban bagus. Memberikan dasar untuk solusi saya - saya menggunakan label yang ada setelah input di mana Anda telah menggunakan rentang tambahan dan saya mendapatkan dukungan Edge & FF.
Jono

2
Sebagian besar jawaban ini mengabaikan aksesibilitas. Saya suka bahwa jawaban ini menjaga itu tetap bijaksana.
maxshuty

1
@ Maxshuty Saya suka pendekatan Anda juga: ketika seseorang membuat perpustakaan, seringkali itu hanya sebuah pengakuan bahwa ia tidak dapat membuat kode sederhana dalam bahasa asli pilihannya. IMHO FontAwesome mengacaukan rencana gratis mereka menggunakan javascript untuk memuat font, tapi saya masih suka mereka karena mereka tetap open source dan lisensi gratis. Saya biasanya berakhir dengan sub-ikon tempa ikon gratis yang saya butuhkan dalam proyek tertentu (biasanya maks 5kB). Saya akan dengan senang hati membayar jika mereka menyelamatkan usaha saya, tetapi bukan $ 99 gila per tahun ketika mereka mengusulkan dalam rencana Pro mereka.
Jan Turoň

30

Anda dapat menata kotak centang dengan tipu daya kecil menggunakan labelelemen contoh di bawah ini:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}
<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

Dan FIDDLE untuk kode di atas. Perhatikan bahwa beberapa CSS tidak berfungsi di versi browser yang lebih lama, tapi saya yakin ada beberapa contoh JavaScript yang bagus di luar sana!


28

Sederhana untuk diterapkan dan solusi mudah disesuaikan

Setelah banyak pencarian dan pengujian saya mendapatkan solusi ini yang mudah diterapkan dan lebih mudah untuk disesuaikan. Dalam solusi ini :

  1. Anda tidak perlu perpustakaan dan file eksternal
  2. Anda tidak perlu menambahkan HTML tambahan di halaman Anda
  3. Anda tidak perlu mengubah nama dan id kotak centang

Sederhana menempatkan CSS yang mengalir di bagian atas halaman Anda dan semua gaya kotak centang akan berubah seperti ini:

Masukkan deskripsi gambar di sini

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

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

1
Lebih sederhana lebih baik!
Adrian Moisa

Ini adalah jawaban yang bagus, hanya berfungsi tanpa perlu tambahan apa pun
HeavyHead

Bagus dan sangat sederhana
khalidh

Solusi yang bagus. Tapi saya tidak melihatnya bekerja di Firefox, IE atau Edge (tidak ada kotak centang)
Jono

20

Anda dapat menghindari menambahkan markup tambahan. Ini berfungsi di mana-mana kecuali IE untuk Desktop (tetapi berfungsi di IE untuk Windows Phone dan Microsoft Edge) melalui pengaturan CSS appearance:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}
<input type="checkbox" />


3
Saya suka pendekatan ini - ini agak hacky karena Anda seharusnya tidak pernah benar-benar menggunakan penampilan di css tetapi jauh lebih bersih daripada beberapa jawaban lain yang digunakan sebelum dan sesudah. Dan untuk hal seperti ini saya merasa JavaScript sepenuhnya berlebihan.
Sprose

18

Saya lebih suka menggunakan font ikon (seperti FontAwesome) karena mudah untuk memodifikasi warna mereka dengan CSS, dan mereka skala sangat baik pada perangkat kepadatan pixel tinggi. Jadi inilah varian CSS murni lainnya, menggunakan teknik yang mirip dengan yang di atas.

(Di bawah ini adalah gambar statis sehingga Anda dapat memvisualisasikan hasilnya; lihat JSFiddle untuk versi interaktif.)

Contoh kotak centang

Seperti halnya solusi lain, ia menggunakan labelelemen. Yang berdekatan spanmemegang karakter kotak centang kami.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Inilah JSFiddle untuk itu.


.... apa yang Anda gambarkan sama dengan jawaban sebelumnya dari Bhushan wagh, Jake, Jonathan Hodgson and Blake;)
SW4

7
@ SW4 Saya telah membuat referensi ke fakta itu, kecuali jawaban ini menggunakan font ikon (yang tidak dimiliki oleh jawaban sebelumnya). Paragraf pertama membuatnya cukup jelas.
cobberboy

Anda perlu mengganti font-family: FontAwesome;dengan font-family: 'Font Awesome\ 5 Free';, dan memperbarui konten unicode jika Anda ingin membuatnya dalam versi baru.
SuN

12

Baru-baru ini saya menemukan solusi yang cukup menarik untuk masalah ini.

Anda dapat menggunakan appearance: none;untuk mematikan gaya default kotak centang dan kemudian menulis sendiri di atasnya seperti dijelaskan di sini (Contoh 4) .

Contoh biola

Sayangnya dukungan browser sangat buruk untuk appearanceopsi. Dari pengujian pribadi saya, saya hanya dapat menggunakan Opera dan Chrome dengan benar. Tapi ini akan menjadi cara untuk membuatnya tetap sederhana ketika dukungan yang lebih baik datang atau Anda hanya ingin menggunakan Chrome / Opera.

"Bisakah saya menggunakan?" tautan


Memang appearanceitulah yang kita butuhkan untuk ini; hanya perlu diingat itu "tidak standar dan tidak di jalur standar" .
sam

12

Dengan CSS murni, tidak ada yang disukai :beforedan :after, tanpa transformasi, Anda dapat mematikan tampilan default dan menatanya dengan gambar latar inline seperti contoh berikut. Ini berfungsi di Chrome, Firefox, Safari, dan sekarang Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>


1
Iya! Hanya satu yang benar-benar layak.
odinho

10

Solusi saya

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>


Jika seseorang dapat memberi saran mengapa teks saya tidak selaras, saya ingin tahu! Pemula CSS di sini.
agirault

8

Anda cukup menggunakan appearance: nonedi browser modern, sehingga tidak ada gaya default dan semua gaya Anda diterapkan dengan benar:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

1
Ini adalah contoh yang sangat minimalis yang berhasil untuk kasus saya, terima kasih!
Jason R Stevens CFA

8

Ingin TIDAK JavaScript, TIDAK ada perpustakaan eksternal, Kepatuhan aksesibilitas, dan baik Kotak centang dan Tombol Radio?

Saya telah menggulir dan menggulir dan banyak jawaban ini hanya membuang aksesibilitas keluar pintu dan melanggar WCAG di lebih dari satu cara. Saya memasukkan tombol radio karena sebagian besar waktu ketika Anda menggunakan kotak centang khusus Anda ingin tombol radio kustom juga.

biola :

  • Kotak centang - CSS murni - bebas dari perpustakaan pihak ke-3
  • Tombol radio - CSS murni - bebas dari perpustakaan pihak ke-3
  • Kotak centang * yang menggunakan FontAwesome tetapi dapat dengan mudah ditukar dengan Glyphicons, dll

Terlambat ke pesta tetapi entah bagaimana ini masih sulit di 2019 2020 jadi saya telah menambahkan tiga solusi saya yang dapat diakses dan mudah untuk diterima.

Ini semua adalah JavaScript gratis , perpustakaan eksternal * gratis , dan dapat diakses ...

Jika Anda ingin plug-n-play dengan semua ini cukup salin style sheet dari biola, edit kode warna dalam CSS agar sesuai dengan kebutuhan Anda, dan segera lanjutkan. Anda dapat menambahkan ikon tanda centang svg kustom jika Anda ingin untuk kotak centang. Saya telah menambahkan banyak komentar untuk orang-orang non-CSS'y.

Jika Anda memiliki teks yang panjang atau wadah kecil dan menemukan pembungkusan teks di bawah kotak centang atau input tombol radio maka cukup konversi ke divs seperti ini .

Penjelasan yang lebih panjang: Saya membutuhkan solusi yang tidak melanggar WCAG, tidak bergantung pada JavaScript atau perpustakaan eksternal, dan yang tidak memecah navigasi keyboard seperti memilih tab atau bilah spasi, yang memungkinkan acara fokus, solusi yang memungkinkan untuk kotak centang yang dinonaktifkan yang keduanya diperiksa dan dicentang, dan akhirnya solusi di mana saya bisa menyesuaikan tampilan kotak centang namun saya inginkan dengan berbeda background-color's, border-radius, svglatar belakang, dll

Saya menggunakan beberapa kombinasi jawaban ini dari @Jan Turoň untuk menghasilkan solusi saya sendiri yang sepertinya berfungsi cukup baik. Saya telah melakukan biola tombol radio yang menggunakan banyak kode yang sama dari kotak centang untuk membuat ini berfungsi dengan tombol radio juga.

Saya masih mempelajari aksesibilitas, jadi jika saya melewatkan sesuatu, silakan beri komentar dan saya akan mencoba memperbaikinya di sini adalah contoh kode dari kotak centang saya:

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}
<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>


Saya menambahkan jawaban saya sendiri di sini juga, semoga membantu seseorang. Saya memanfaatkannya di tambang. :) Semoga ada yang melihatnya.
Tn. Polywhirl

6

Berikut ini adalah solusi CSS sederhana tanpa kode jQuery atau JavaScript.

Saya menggunakan ikon FontAwseome tetapi Anda dapat menggunakan gambar apa pun

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

1
Tidak seperti sebagian besar jawaban lainnya, jawaban ini tidak memerlukan kreasi tambahan labelatau spanelemen. Itu hanya bekerja!
KurtPreston

Bisakah Anda menunjukkan contoh atau demo, atau setidaknya bagian HTML, yang dengannya kode CSS ini berfungsi? @aWebDeveloper
Sándor Zuboly

@ aWebDeveloper melakukan pengeditan yang tidak waras untuk menabrak jawaban atau pertanyaan ke beranda adalah melanggar aturan.
TylerH

@ aWebDeveloper Anda telah mengedit jawaban lama pada pertanyaan tidak aktif, yang menabraknya ke halaman depan dan menyediakan tautan langsung ke jawaban Anda. Ini bagus jika Anda memiliki info terkait untuk ditambahkan atau diubah dalam jawaban. Yang Anda lakukan hanyalah menyematkan salah satu kalimat Anda di blok kutipan, yang tidak berguna bagi siapa pun.
TylerH

harus bekerja @VimimOvchinnikov ... tidak ada yang spesifik chrome di sini
aWebDeveloper

6

Dari googling saya, ini adalah cara termudah untuk penataan kotak centang. Cukup tambahkan :afterdan :checked:afterCSS berdasarkan desain Anda.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}
<input type="checkbox"> <span>Select Text</span>


Solusi yang sangat keren untuk browser yang mendukung elemen semu. :)
Jean-François Beauchamp

6

Ubah gaya kotak centang dengan CSS3 polos, tidak memerlukan manipulasi JS & HTML.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form class="form">
  <input type="checkbox" />
</form>


@VadimOvchinnikov Kami memiliki satu solusi yang mengharuskan untuk mengikuti beberapa struktur html .. stackoverflow.com/questions/23305780/…
BEJGAM SHIVA PRASAD

4

Template yang sederhana dan ringan juga:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/


1
Pseudoelements untuk inputs hanya didukung di Chrome, kode Anda tidak berfungsi sama di setiap browser.
Vadim Ovchinnikov

4

Saya pikir cara termudah untuk melakukannya adalah dengan menata labeldan membuatcheckbox tidak terlihat.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

The checkbox, meskipun tersembunyi, masih dapat diakses, dan nilainya akan dikirim ketika formulir dikirimkan. Untuk browser lama Anda mungkin harus mengubah kelas dari labeluntuk diperiksa menggunakan JavaScript karena saya tidak berpikir versi lama Internet Explorer memahami ::checkedpada checkbox.


4
Perbedaan antara jawaban Anda dan jawaban saya adalah apa sebenarnya?
Blake Pettersson

@BlakePettersson milikmu sudah benar, :: diperiksa hanya salah (aku bahkan mencoba kalau-kalau itu juga diizinkan);)
esp

7
Ini jawaban yang buruk. (a) ::checkedsalah — seharusnya :checked. (b) checkboxsalah — seharusnya[type=checkbox]
Chris Morgan

4

Astaga! Semua solusi ini telah membawa saya pada kesimpulan bahwa kotak centang HTML agak menyebalkan jika Anda ingin menata.

Sebagai peringatan, ini bukan implementasi CSS. Saya hanya berpikir saya akan berbagi solusi yang saya buat kalau-kalau ada orang lain yang merasa berguna.


Saya menggunakan canvaselemen HTML5 .

Keuntungannya adalah Anda tidak harus menggunakan gambar eksternal dan mungkin dapat menghemat bandwidth.

Kelemahannya adalah jika browser karena alasan tertentu tidak dapat merendernya dengan benar, maka tidak ada fallback. Meskipun apakah ini tetap menjadi masalah di 2017 masih bisa diperdebatkan.

Memperbarui

Saya menemukan kode lama cukup jelek, jadi saya memutuskan untuk menulis ulang.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Ini demo yang berfungsi .

Versi baru menggunakan prototipe dan pewarisan diferensial untuk membuat sistem yang efisien untuk membuat kotak centang. Untuk membuat kotak centang:

var my_checkbox = Checkbox.create();

Ini akan segera menambahkan kotak centang ke DOM dan menghubungkan acara. Untuk menanyakan apakah kotak centang dicentang:

my_checkbox.is_checked(); // True if checked, else false

Juga penting untuk dicatat adalah bahwa saya menyingkirkan loop.

Perbarui 2

Sesuatu yang saya lalai untuk menyebutkan dalam pembaruan terakhir adalah bahwa menggunakan kanvas memiliki kelebihan lebih dari sekadar membuat kotak centang yang terlihat namun Anda ingin melihatnya. Anda juga bisa membuat kotak centang multi-negara , jika Anda mau.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

Saya sedikit memodifikasi yang Checkboxdigunakan dalam cuplikan terakhir sehingga lebih umum, sehingga memungkinkan untuk "memperpanjang" dengan kotak centang yang memiliki 3 status. Ini demo . Seperti yang Anda lihat, itu sudah memiliki lebih banyak fungsi daripada kotak centang bawaan.

Sesuatu untuk dipertimbangkan ketika Anda memilih antara JavaScript dan CSS.

Kode lama, tidak dirancang dengan baik

Demo yang Bekerja

Pertama, atur kanvas

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Selanjutnya, cari cara untuk memiliki pembaruan kanvas itu sendiri.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

Bagian terakhir adalah membuatnya interaktif. Untungnya, ini sangat sederhana:

canvas.onclick = function(){
  checked = !checked;
}

Di sinilah Anda mungkin memiliki masalah di IE, karena model penanganan peristiwa aneh mereka dalam JavaScript.


Saya harap ini membantu seseorang; itu pasti sesuai dengan kebutuhan saya.


Perhatikan bahwa implementasi Canvas, sebagai emulasi kotak centang, memungkinkan lebih banyak fungsi daripada kotak centang bawaan. Misalnya, barang-barang mewah seperti "multi-state" kotak centang (yaitu unchecked (e.g. unchecked -> checked -> "kinda" checked -> unchecked; negara dapat mewakili "eksplisit salah", "eksplisit benar", "gunakan default", misalnya). Saya sedang mempertimbangkan untuk menambahkan contoh pada jawabannya.
Braden Best

Ide yang mengerikan menurut saya.

@Neil tolong jelaskan
Braden Best

Mengapa menemukan kembali roda?

@Neil mengapa tidak menemukan kembali roda? NIH tidak selalu merupakan hal yang buruk, terutama ketika memberikan keuntungan yang tidak mungkin atau rumit untuk diterapkan dengan teknologi yang ada. Jadi itu adalah pertanyaan apakah Anda bersedia berurusan dengan kotak centang bawaan. Dan jika saya ingin tema mereka untuk menyatu dengan bahasa visual situs web atau aplikasi saya, saya ingin kontrol penuh. Jadi, sampai seseorang membuat perpustakaan UI mandiri yang ringan dan mudah digunakan, saya pribadi lebih suka roda saya untuk ditemukan di sini. Orang lain mungkin tidak, tetapi itu tidak membatalkan jawaban saya.
Braden Best

3

Ini adalah cara paling sederhana dan Anda dapat memilih kotak centang mana yang memberikan gaya ini.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

3

Tidak diperlukan JavaScript atau jQuery .

Ubah gaya kotak centang Anda dengan cara sederhana.

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}
<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

Inilah tautan JsFiddle


Kotak centang tidak muncul, karena bergantung pada tautan eksternal ke file gambar imgh.us/uncheck.png dan imgh.us/check_2.png yang tidak lagi tersedia online.
jkdev

2

Ini adalah versi CSS / HTML saja, tidak memerlukan jQuery atau JavaScript sama sekali, HTML sederhana dan bersih dan CSS sangat sederhana dan singkat.

Ini JSFiddle

http://jsfiddle.net/v71kn3pr/

Ini HTML-nya:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

Inilah CSS-nya

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

Ini dapat disesuaikan untuk dapat memiliki masing-masing radio atau kotak centang, gerombolan kotak centang dan kelompok tombol radio.

Ini html / css, akan memungkinkan Anda untuk juga menangkap klik pada label, sehingga kotak centang akan dicentang dan tidak dicentang bahkan jika Anda mengklik hanya pada label.

Jenis kotak centang / tombol radio ini berfungsi dengan baik dalam bentuk apa pun, tidak ada masalah sama sekali. Telah diuji menggunakan PHP, ASP.NET (.aspx), JavaServer Faces , dan ColdFusion juga.


2
**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

1
input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}

Penjelasan akan diurutkan.
Peter Mortensen

1

Tidak, Anda masih tidak dapat menata kotak centang itu sendiri, tetapi saya (akhirnya) menemukan cara untuk menata ilusi sambil menjaga fungsionalitas mengklik kotak centang. Ini berarti bahwa Anda dapat beralih bahkan jika kursor tidak diam tanpa risiko memilih teks atau memicu seret-dan-jatuhkan!

Solusi ini mungkin juga cocok dengan tombol radio.

Berikut ini berfungsi di Internet Explorer 9, Firefox 30.0 dan Chrome 40.0.2214.91 dan hanya merupakan contoh dasar. Anda masih dapat menggunakannya dalam kombinasi dengan gambar latar belakang dan elemen pseudo.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>

1

Karena browser seperti Edge dan Firefox tidak mendukung: before: after pada tag input checkbox, berikut ini adalah alternatif murni dengan HTML dan CSS. Tentu saja Anda harus mengedit CSS sesuai dengan kebutuhan Anda.

Buat HTML untuk kotak centang seperti ini:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Terapkan gaya ini untuk kotak centang untuk mengubah label warna

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>

1

Tampaknya Anda dapat mengubah warna kotak centang dalam skala abu-abu hanya dengan menggunakan CSS.

Berikut ini mengonversi kotak centang dari hitam menjadi abu-abu (sesuai keinginan saya):

input[type="checkbox"] {
    opacity: .5;
}

ini membuat perbatasan cahaya juga. juga, Anda tidak dapat benar-benar melihat cek jika Anda memeriksanya.
Rachel S

1

Implementasi SCSS / SASS

Pendekatan yang lebih modern

Bagi mereka yang menggunakan SCSS (atau mudah dikonversi ke SASS), berikut ini akan sangat membantu. Secara efektif, buat elemen di sebelah kotak centang, yang merupakan elemen yang akan Anda gaya. Ketika kotak centang diklik, CSS mengatur ulang elemen kakak (ke gaya baru Anda yang dicentang). Kode di bawah ini:

label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &:checked + span {
      background: $accent;
    }
  }

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}
<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>


0

Peringatan : berikut ini benar pada saat penulisan, tetapi sementara itu hal-hal telah berkembang.

Peramban modern AFAIK menampilkan kotak centang menggunakan kontrol OS asli, jadi tidak ada cara untuk menatanya.


30
Mungkin benar di '10, tetapi tidak sekarang, Anda harus menghapus jawaban ini.
Michał K

3
Ini masih benar - semua browser modern menampilkan kotak centang menggunakan kontrol OS asli. Hanya saja ada beberapa teknik baru yang keren untuk mengatasi keterbatasan ini.
Gal

Ya, saya mengacu pada bagian "tidak ada cara untuk menata mereka" ^^
Joril
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.