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?

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:

• Membuat Custom Form Checkbox dengan Just CSS
• Generator Kotak centang CSS Mudah
• Hal-hal yang Dapat Anda Lakukan Dengan Hack Kotak Centang
• Menerapkan Kotak centang Kustom dan Tombol Radio dengan CSS3
• Bagaimana Gaya Kotak Centang Dengan CSS

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.

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>

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>

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)

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

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>

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.

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!

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:

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

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

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

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.

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

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

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

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>

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>

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

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>

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

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>

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>

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/

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.

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.

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>

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

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.

**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;
    }

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