Input gaya kotak centang CSS

Gaya apa pun untuk inputmemengaruhi setiap elemen input. Apakah ada cara untuk menentukan gaya yang diterapkan hanya untuk kotak centang tanpa menerapkan kelas untuk setiap elemen kotak centang?

Dengan CSS 2 Anda dapat melakukan ini:

input[type='checkbox'] { ... }

Ini seharusnya cukup banyak didukung sekarang. Lihat dukungan untuk browser

Saya membuat solusi sendiri tanpa label

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Sesuatu yang baru-baru ini saya temukan untuk menata Radio Buttons AND checkbox. Sebelumnya, saya harus menggunakan jQuery dan hal-hal lain. Tapi ini sangat sederhana.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Anda dapat melakukan hal yang sama untuk kotak centang, jelas mengubah input[type=radio]to input[type=checkbox]dan ubah border-radius:15px;ke border-radius:4px;.

Semoga ini agak bermanfaat bagi Anda.

Kelas juga berfungsi dengan baik, seperti:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

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

Anda hanya dapat menerapkan atribut tertentu dengan melakukan:

input[type="checkbox"] {...}

Itu menjelaskannya di sini .

input[type="checkbox"] {
 /* your style */
}

Tetapi ini hanya akan berfungsi untuk browser kecuali IE7 dan di bawahnya, bagi mereka Anda harus menggunakan kelas.

Trident menyediakan ::-ms-checkelemen pseudo untuk kotak centang dan kontrol tombol radio. Sebagai contoh:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Ini ditampilkan sebagai berikut di IE10 pada Windows 8:

Karena IE6 tidak mengerti selektor atribut, Anda dapat menggabungkan skrip yang hanya dilihat oleh IE6 (dengan komentar bersyarat) dan jQuery atau IE7.js oleh Dean Edwards.

IE7 (.js) adalah perpustakaan JavaScript untuk membuat Microsoft Internet Explorer berperilaku seperti browser yang sesuai standar. Ini memperbaiki banyak masalah HTML dan CSS dan membuat PNG transparan bekerja dengan benar di bawah IE5 dan IE6.

Pilihan menggunakan kelas atau jQuery atau IE7.js tergantung pada suka dan tidak suka Anda dan kebutuhan Anda yang lain (mungkin transparansi PNG-24 di seluruh situs Anda tanpa harus bergantung pada PNG-8 dengan transparansi lengkap yang mundur ke transparansi 1-bit pada IE6 - hanya dibuat oleh Fireworks dan pngnq, dll)

Meskipun CSS memang menyediakan cara bagi Anda untuk melakukan gaya khusus untuk jenis kotak centang atau jenis lain, akan ada masalah dengan browser yang tidak mendukung ini.

Saya pikir satu-satunya pilihan Anda dalam hal ini adalah menerapkan kelas ke kotak centang Anda.

tambahkan saja class = "kotak centang" ke kotak centang Anda.

Kemudian buat gaya itu dalam kode css Anda.

Satu hal yang dapat Anda lakukan adalah ini:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Kemudian gunakan css spesifik IE termasuk:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Anda masih perlu menambahkan kelas agar bisa berfungsi di IE, dan itu tidak akan bekerja di browser non-IE lain yang tidak mendukung IE. Tapi itu akan membuat situs web Anda berpikiran maju dengan kode css dan ketika IE mendapat dukungan, Anda akan dapat menghapus kode css tertentu dan juga kelas css dari kotak centang.