Próbuję stylizować pole wyboru, używając następujących elementów:

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

Ale styl nie jest stosowany. Pole wyboru nadal wyświetla domyślny styl. Jak nadać mu określony styl?

AKTUALIZACJA:

Poniższa odpowiedź odnosi się do stanu rzeczy przed powszechną dostępnością CSS 3. We współczesnych przeglądarkach (w tym Internet Explorer 9 i nowszych) łatwiej jest tworzyć zamienniki pól wyboru według preferowanej stylizacji, bez użycia JavaScript.

Oto kilka przydatnych linków:

• Tworzenie niestandardowych pól wyboru formularza za pomocą Just CSS
• Łatwy generator CSS Checkbox
• Rzeczy, które możesz zrobić dzięki hakowi Checkbox
• Implementowanie niestandardowych pól wyboru i przycisków opcji w CSS3
• Jak stylizować pole wyboru za pomocą CSS

Warto zauważyć, że podstawowa kwestia się nie zmieniła. Nadal nie można zastosować stylów (ramek itp.) Bezpośrednio do elementu pola wyboru, a style te mają wpływ na wyświetlanie pola wyboru HTML. Jednak zmieniło się to, że teraz można ukryć rzeczywiste pole wyboru i zastąpić go własnym stylem, używając tylko CSS. W szczególności, ponieważ CSS ma teraz szeroko obsługiwany :checkedselektor, możesz sprawić, aby zamiennik poprawnie odzwierciedlał status zaznaczonego pola.

STARSZA ODPOWIEDŹ

Oto przydatny artykuł na temat pól wyboru stylizacji . Zasadniczo ten pisarz stwierdził, że różni się ogromnie w zależności od przeglądarki i że wiele przeglądarek zawsze wyświetla domyślne pole wyboru, bez względu na to, jak go stylizujesz. Tak naprawdę nie ma łatwego sposobu.

Nietrudno wyobrazić sobie obejście, w którym można użyć JavaScript do nałożenia obrazu na pole wyboru, a kliknięcie tego obrazu powoduje zaznaczenie prawdziwego pola wyboru. Użytkownicy bez JavaScript zobaczyliby domyślne pole wyboru.

Zmodyfikowano, aby dodać: oto fajny skrypt, który robi to za Ciebie ; ukrywa prawdziwy element pola wyboru, zastępuje go stylem zakresu i przekierowuje zdarzenia kliknięcia.

Jest na to sposób za pomocą CSS. Możemy (ab) użyć tego labelelementu i nadać mu styl. Zastrzeżenie polega na tym, że nie będzie to działać w przypadku programu Internet Explorer 8 i niższych wersji.

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

Można osiągnąć całkiem fajny efekt niestandardowe pole wyboru przy użyciu nowych umiejętności, które pochodzą z :afteri :beforepseudo klas. Zaletą tego jest: Nie musisz dodawać nic więcej do DOM, tylko standardowe pole wyboru.

Uwaga: będzie to działać tylko w przypadku zgodnych przeglądarek. Wierzę, że jest to związane z faktem, że niektóre przeglądarki nie pozwalają na ustawienie :afteri :beforena elementach wejściowych. Co niestety oznacza, że ​​na razie obsługiwane są tylko przeglądarki WebKit. Firefox + Internet Explorer nadal będzie pozwalał na funkcjonowanie pól wyboru, po prostu niestylowany, i mam nadzieję, że zmieni się to w przyszłości (kod nie używa prefiksów dostawcy).

Jest to tylko rozwiązanie przeglądarki WebKit (Chrome, Safari, przeglądarki mobilne)

Zobacz przykład skrzypce

$(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>

Bonusowe skrzypce w stylu Webkit

$(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>

Zanim zaczniesz (od stycznia 2015)

Oryginalne pytanie i odpowiedź mają teraz ~ 5 lat. W związku z tym jest to trochę aktualizacja.

Po pierwsze, istnieje wiele podejść do stylizacji pól wyboru. podstawową zasadą jest:

1. Musisz ukryć domyślną kontrolkę pola wyboru, która jest stylizowana przez twoją przeglądarkę i nie można jej w żaden znaczący sposób zastąpić za pomocą CSS.

2. Gdy kontrola jest ukryta, nadal będziesz w stanie wykryć i przełączyć jej sprawdzony stan

3. Zaznaczony stan pola wyboru będzie musiał zostać odzwierciedlony przez stylizację nowego elementu

Rozwiązanie (w zasadzie)

Można to osiągnąć na wiele sposobów - i często usłyszysz, że użycie pseudoelementów CSS3 jest właściwą drogą. W rzeczywistości nie ma prawdziwego dobrego lub złego sposobu, zależy to od podejścia najbardziej odpowiedniego dla kontekstu, w którym będziesz go używał. To powiedziawszy, mam preferowane.

1. Zawiń pole wyboru w labelelemencie. Oznacza to, że nawet gdy jest ukryty, nadal możesz przełączać jego zaznaczony stan po kliknięciu w dowolnym miejscu etykiety.

2. Ukryj pole wyboru

3. Dodaj nowy element za polem wyboru, które odpowiednio stylizujesz. Musi pojawić się za polem wyboru, aby można go było wybrać za pomocą CSS i stylizować w zależności od :checkedstanu. CSS nie może wybrać „wstecz”.

Rozwiązanie (w kodzie)

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>

Udoskonalenie (za pomocą ikon)

Ale hej! Słyszę jak krzyczysz. Co jeśli chcę pokazać fajny mały haczyk lub krzyżyk w polu? I nie chcę używać obrazów tła!

Cóż, tutaj mogą wejść w grę pseudoelementy CSS3. Obsługują one contentwłaściwość, która umożliwia wstrzykiwanie ikon Unicode reprezentujących oba stany. Alternatywnie, możesz użyć źródła ikony innej firmy, takiego jak czcionka niesamowita (pamiętaj jednak, aby ustawić odpowiednie font-family, np. Na 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>

Postępuję zgodnie z radą zawartą w odpowiedzi SW4 - aby ukryć pole wyboru i zakryć go niestandardowym zakresem, sugerując ten kod HTML:

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

Zawijanie etykiety pozwala starannie kliknąć tekst bez konieczności łączenia atrybutów „for-id”. Jednak,

Nie ukrywaj go za pomocą visibility: hiddenlubdisplay: none

Działa poprzez klikanie lub stukanie, ale jest to kiepski sposób używania pól wyboru. Niektóre osoby nadal używają znacznie bardziej efektywnego Tabdo poruszania się, Spaceaktywacji, a ukrywanie się za pomocą tej metody wyłącza go. Jeśli formularz jest długi, oszczędza się czyjeś nadgarstki do użycia tabindexlub accesskeyatrybuty. A jeśli zaobserwujesz zachowanie pola wyboru systemu, najechanie myszą na przyzwoity cień. Dobrze zaprojektowane pole wyboru powinno być zgodne z tym zachowaniem.

Odpowiedź cobberboy zaleca Font Awesome, który jest zwykle lepszy niż bitmapa, ponieważ czcionki są wektorami skalowalnymi. Pracując z powyższym kodem HTML, sugeruję następujące reguły CSS:

1. Ukryj pola wyboru

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

   Używam tylko przeczenia, z-indexponieważ mój przykład wykorzystuje wystarczająco dużą skórkę pola wyboru, aby w pełni ją zakryć. Nie polecam, left: -999pxponieważ nie można go używać w każdym układzie. Odpowiedź Bushana zapewnia kuloodporny sposób na ukrycie go i przekonanie przeglądarki do korzystania z tabindex, więc jest to dobra alternatywa. W każdym razie oba to tylko hack. Właściwy sposób to dziś appearance: none, patrz odpowiedź Joosta :

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

2. Etykieta pola wyboru stylu

   input[type="checkbox"] + span {
     font: 16pt sans-serif;
     color: #000;
   }

3. Dodaj skórkę pola wyboru

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

   \00f096jest czcionką Awesome square-o, dopełnienie jest dostosowywane, aby zapewnić skupienie nawet kropkowanego konturu (patrz poniżej).

4. Dodaj zaznaczoną skórkę

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

   \00f046jest czcionką Awesome check-square-o, która nie ma takiej samej szerokości square-o, co jest przyczyną powyższego stylu szerokości.

5. Dodaj zarys ostrości

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

   Safari nie zapewnia tej funkcji (patrz komentarz @Jason Sankey), powinieneś użyć window.navigatordo wykrycia przeglądarki i pominięcia jej, jeśli jest to Safari.

6. Ustaw szary kolor dla wyłączonego pola wyboru

   input[type="checkbox"]:disabled + span {
     color: #999;
   }

7. Ustaw cień hover na nie wyłączonym polu wyboru

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

Demo Fiddle

Spróbuj najechaniu myszką nad wyboru i stosowania Taboraz Shift+ Tabdo poruszania się i Spacedo przełączania.

Możesz stylizować pola wyboru przy użyciu odrobiny sztuczki, używając labelelementu, którego przykład poniżej:

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

I FIDDLE dla powyższego kodu. Pamiętaj, że niektóre CSS nie działają w starszych wersjach przeglądarek, ale jestem pewien, że są tam jakieś fantazyjne przykłady JavaScript!

Proste w implementacji i łatwe do dostosowania rozwiązanie

Po wielu poszukiwaniach i testach otrzymałem to rozwiązanie, które jest łatwe do wdrożenia i łatwiejsze do dostosowania. W tym rozwiązaniu :

1. Nie potrzebujesz zewnętrznych bibliotek i plików
2. Nie musisz dodawać dodatkowego kodu HTML na swojej stronie
3. Nie musisz zmieniać nazw pól wyboru i identyfikatora

Wystarczy umieścić płynny CSS u góry strony, a styl wszystkich pól wyboru zmieni się w następujący sposób:

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

Możesz uniknąć dodawania dodatkowych znaczników. Działa to wszędzie oprócz IE na komputery (ale działa w IE dla Windows Phone i Microsoft Edge) poprzez ustawienie 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" />

Wolę używać czcionek ikon (takich jak FontAwesome), ponieważ można łatwo modyfikować ich kolory za pomocą CSS i skalują się naprawdę dobrze na urządzeniach o dużej gęstości pikseli. Oto kolejny wariant czystego CSS, wykorzystujący techniki podobne do powyższych.

(Poniżej znajduje się obraz statyczny, dzięki czemu można wizualizować wynik; zobacz JSFiddle, aby uzyskać interaktywną wersję).

Podobnie jak w przypadku innych rozwiązań, wykorzystuje labelelement. Obok spanznajduje się nasz znak pola wyboru.

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>

Oto JSFiddle .

Ostatnio znalazłem dość interesujące rozwiązanie problemu.

Możesz użyć, appearance: none;aby wyłączyć domyślny styl pola wyboru, a następnie napisać własny, jak opisano tutaj (Przykład 4) .

Przykładowe skrzypce

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

Niestety obsługa przeglądarki jest dość zła dla appearance opcji. Z moich osobistych testów wynika, że ​​tylko Opera i Chrome działają poprawnie. Byłby to jednak sposób na uproszczenie, gdy pojawi się lepsze wsparcie lub chcesz tylko korzystać z Chrome / Opera.

"Mogę uzyć?" połączyć

Z czystym CSS, nic szczególnego :beforei :afterbez transformacji, możesz wyłączyć domyślny wygląd, a następnie stylizować go za pomocą wbudowanego obrazu tła, jak w poniższym przykładzie. Działa to w Chrome, Firefox, Safari, a teraz 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>

Moje rozwiązanie

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>

Możesz po prostu używać appearance: nonew nowoczesnych przeglądarkach, aby nie było domyślnego stylu, a wszystkie style były stosowane poprawnie:

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

Chcesz NIE JavaScript, BEZ bibliotek zewnętrznych, zgodności z ułatwieniami dostępu, a także pól wyboru i przycisków radiowych?

Przewijałem i przewijałem, a mnóstwo tych odpowiedzi po prostu wyrzuciło dostępność za drzwi i naruszyło WCAG na więcej niż jeden sposób. Wrzuciłem przyciski opcji, ponieważ przez większość czasu, kiedy używasz niestandardowych pól wyboru, chcesz także niestandardowe przyciski opcji.

Skrzypce :

• Pola wyboru - czysty CSS - wolny od bibliotek stron trzecich
• Przyciski radiowe - czysty CSS - wolny od bibliotek stron trzecich
• Pola wyboru *, które używają FontAwesome, ale można je łatwo zamieniać na Glyphicony itp

Późno na imprezę, ale w jakiś sposób jest to nadal trudne w 2019 2020, więc dodałem moje trzy rozwiązania, które są dostępne i łatwo wpaść.

Wszystkie są wolne od JavaScript , zewnętrzne biblioteki wolne * i dostępne ...

Jeśli chcesz podłączyć dowolną z nich, po prostu skopiuj arkusz stylów ze skrzypiec, edytuj kody kolorów w CSS, aby dopasować je do swoich potrzeb i być na dobrej drodze. Możesz dodać niestandardową ikonę znacznika svg, jeśli chcesz dla pól wyboru. Dodałem wiele komentarzy dla osób spoza CSS.

Jeśli masz długi tekst lub mały pojemnik i napotykasz zawijanie tekstu pod polem wyboru lub przyciskiem radiowym, po prostu przekonwertuj na div tak jak to .

Dłuższe wyjaśnienie: potrzebowałem rozwiązania, które nie narusza WCAG, nie opiera się na JavaScript ani bibliotekach zewnętrznych, i które nie przerywa nawigacji po klawiaturze, takiej jak tabulacja lub spacja, aby wybrać zdarzenia, które umożliwiają fokusowanie zdarzeń, rozwiązanie, które pozwala na wyłączenie pól wyboru, które są zarówno sprawdzone i niekontrolowany, a wreszcie rozwiązanie, w którym można dostosować wygląd wyboru jednak chcę z różnymi background-color„s, border-radius, svgtła, itd.

Użyłem kombinacji tej odpowiedzi od @Jana Turoňa, aby znaleźć własne rozwiązanie, które wydaje się działać całkiem dobrze. Zrobiłem skrzypce przycisku radiowego, który używa dużo tego samego kodu z pól wyboru, aby to działało również z przyciskami radiowymi.

Wciąż uczę się dostępności, więc jeśli coś przeoczyłem, zostaw komentarz i postaram się go poprawić, to przykład kodu moich pól wyboru:

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>

Oto proste rozwiązanie CSS bez kodu jQuery lub JavaScript.

Używam ikon FontAwseome, ale możesz użyć dowolnego obrazu

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

Z mojego googlowania jest to najprostszy sposób na stylizację pól wyboru. Wystarczy dodać :afteri :checked:afterCSS w oparciu o swój projekt.

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>

Zmodyfikuj styl pola wyboru za pomocą zwykłego CSS3, nie wymagał żadnych manipulacji JS i 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>

Prosty i lekki szablon:

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/

Myślę, że najłatwiej to zrobić, projektując labeli czyniąc checkboxniewidzialnym.

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

checkbox, Mimo że jest ukryty, będą nadal dostępne, a jego wartość zostanie wysłana, gdy formularz jest składany. W przypadku starych przeglądarek może być konieczna zmiana klasy labelna sprawdzane za pomocą JavaScript, ponieważ nie sądzę, aby stare wersje Internet Explorera rozumiały ::checkedw checkbox.

Yikes! Wszystkie te obejścia doprowadziły mnie do wniosku, że pole wyboru HTML jest do bani, jeśli chcesz go stylizować.

Ostrzegając, nie jest to implementacja CSS. Pomyślałem, że podzielę się obejściem, na które wpadłem, na wypadek, gdyby ktokolwiek mógł uznać to za przydatne.

Użyłem canvaselementu HTML5 .

Zaletą tego jest to, że nie musisz używać zewnętrznych obrazów i prawdopodobnie możesz zaoszczędzić trochę przepustowości.

Minusem jest to, że jeśli przeglądarka z jakiegoś powodu nie może poprawnie wyrenderować, to nie ma rezerwy. Jednak kwestia, czy problem ten pozostaje w 2017 r., Jest dyskusyjna.

Aktualizacja

Znalazłem stary kod dość brzydki, więc postanowiłem go przepisać.

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

Oto działające demo .

Nowa wersja wykorzystuje prototypy i dziedziczenie różnicowe do stworzenia wydajnego systemu do tworzenia pól wyboru. Aby utworzyć pole wyboru:

var my_checkbox = Checkbox.create();

Spowoduje to natychmiastowe dodanie pola wyboru do DOM i połączenie zdarzeń. Aby zapytać, czy pole wyboru jest zaznaczone:

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

Należy również zauważyć, że pozbyłem się pętli.

Aktualizacja 2

Coś, czego nie wspomniałem w ostatniej aktualizacji, to fakt, że korzystanie z obszaru roboczego ma więcej zalet niż tworzenie pola wyboru, które wygląda tak, jak chcesz. Możesz również utworzyć wielostanowe pola wyboru, jeśli chcesz.

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

Zmodyfikowałem nieco ten Checkboxużyty w ostatnim fragmencie, aby był bardziej ogólny, dzięki czemu można go „rozszerzyć” za pomocą pola wyboru, które ma 3 stany. Oto demo . Jak widać, ma już więcej funkcji niż wbudowane pole wyboru.

Coś do rozważenia przy wyborze między JavaScript a CSS.

Stary, źle zaprojektowany kod

Demo pracy

Najpierw ustaw płótno

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

Następnie wymyśl sposób, aby sama aktualizacja płótna była możliwa.

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

Ostatnią częścią jest interaktywność. Na szczęście jest to dość proste:

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

To tutaj możesz mieć problemy w IE z powodu ich dziwnego modelu obsługi zdarzeń w JavaScript.

Mam nadzieję, że to komuś pomoże; to zdecydowanie odpowiadało moim potrzebom.

Jest to najprostszy sposób i możesz wybrać, które pola wyboru mają dać ten styl.

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>

Nie wymaga JavaScript ani jQuery .

Zmień swój styl pola wyboru w prosty sposób.

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>

Oto link JsFiddle

Oto wersja tylko dla CSS / HTML, nie wymaga jQuery ani JavaScript, prosty i czysty HTML oraz naprawdę prosty i krótki CSS.

Oto JSFiddle

http://jsfiddle.net/v71kn3pr/

Oto HTML:

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

Oto CSS

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

Można to dostosować, aby mieć także indywidualne radio lub pola wyboru, grupy pól wyboru i grupy przycisków opcji.

Ten html / css pozwoli ci również przechwycić kliknięcie etykiety, więc pole wyboru zostanie zaznaczone i odznaczone, nawet jeśli klikniesz tylko etykietę.

Ten rodzaj pola wyboru / przycisku radiowego działa idealnie z każdą formą, bez problemu. Zostały przetestowane przy użyciu PHP, ASP.NET (.aspx), JavaServer Faces i ColdFusion .

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