Możesz osiągnąć całkiem fajny efekt niestandardowego pola wyboru, używając nowych umiejętności, które są dołączone do pseudo klas :after i :before. Zaletą tego jest to, że nie musisz dodawać nic więcej do DOM, tylko standardowe pole wyboru.

Uwaga to będzie działać tylko dla kompatybilnych przeglądarek. Uważam, że jest to związane z faktem, że niektóre przeglądarki nie pozwalają na ustawienie :after i :before na elementach wejściowych. Co niestety oznacza, że na razie obsługiwane są tylko przeglądarki WebKit. Firefox + Internet Explorer nadal będzie zezwalał na funkcje pól wyboru, tylko nieczytelne, a to, miejmy nadzieję, zmieni się 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

$(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 Webkit style flipswitch fiddle

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

Jest sposób, aby to zrobić, używając tylko CSS. Możemy (ab)użyć elementu label i stylować ten element zamiast tego. Zastrzeżenie jest to, że nie będzie to działać dla Internet Explorer 8 i niższe wersje.

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

Zanim zaczniesz (stan na Styczeń 2015)

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

Po pierwsze, istnieje wiele podejść, jeśli chodzi o stylizację pól wyboru. podstawowa zasada to:

1. Musisz ukryć domyślną kontrolkę wyboru, która jest stylizowana przez przeglądarkę i nie może być nadpisana w żaden znaczący sposób za pomocą CSS.

2. Z ukrytym sterowaniem nadal będziesz trzeba umieć wykryć i przełączyć jego sprawdzony stan

3. Stan zaznaczonego pola będzie musiał zostać odzwierciedlony przez stylizację nowego elementu

Rozwiązanie (w zasadzie)

Powyższe można osiągnąć za pomocą wielu środków - i często usłyszysz, że używanie pseudo-elementó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 preferowany.

1. Zawiń swoje pole wyboru w element label. Oznacza to, że nawet jeśli jest on ukryty, można nadal przełączać jego sprawdzony stan po kliknięciu w dowolnym miejscu etykiety.

2. Ukryj swoje pole wyboru

3. Dodaj nowy element po polu wyboru , który odpowiednio wystylizujesz. Musi pojawić się za checkboxem, aby można go było wybrać za pomocą CSS i styl zależny od stanu :checked. 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>

Refinement (using icons)

Ale hej! Słyszę, jak krzyczysz. A co, jeśli chcę pokazać ładny mały kleszcz lub krzyż w pudełku? I nie chcę używać obrazów tła!

Cóż, tutaj pseudoelementy CSS3 mogą wejść w grę. Obsługują one właściwość content, która pozwala wstrzykiwać ikony Unicode reprezentujące oba stany. Alternatywnie, ty można użyć źródła ikon czcionek innych firm, takiego jak font awesome (chociaż upewnij się, że ustawiłeś również 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>

Posłuchałbym rady odpowiedzi SW4 - aby ukryć checkbox i przykryć go niestandardową rozpiętością, sugerując ten HTML:

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

Etykieta zawijania umożliwia klikanie tekstu bez konieczności łączenia atrybutów "for-id". Jednak

Nie ukrywaj go używając visibility: hidden lub display: none

Działa poprzez kliknięcie lub stuknięcie, ale jest to kiepski sposób na użycie pól wyboru. Niektórzy nadal używają znacznie bardziej efektywnej zakładki do przenoszenia ostrości, spacji do aktywować, a ukrywanie za pomocą tej metody wyłącza go. Jeśli formularz jest długi, zapisuje się czyjeś nadgarstki, aby użyć atrybutów tabindex lub accesskey. A jeśli zaobserwujesz zachowanie pola wyboru systemu, pojawi się przyzwoity cień po najechaniu kursorem. Pole wyboru dobrze wystylizowane powinno podążać za tym zachowaniem.

Odpowiedź Cobberboya poleca Font Awesome , która jest zwykle lepsza od bitmapy, ponieważ czcionki są skalowalnymi wektorami. Pracując z powyższym HTML ' em, proponuję te CSS Zasady:

1. Ukryj pola wyboru

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

   Używam tylko negative z-index ponieważ mój przykład używa wystarczająco dużej Skórki checkboxa, aby pokryć ją w pełni. Nie polecam left: -999px, ponieważ nie nadaje się do wielokrotnego użytku w każdym układzie. odpowiedź Bush wagha 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, to tylko włamanie. Prawidłowy sposób dzisiaj jest appearance: none, Zobacz odpowiedź Joosta :

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

2. Style checkbox label

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

3. Dodaj checkbox skin

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

\00f096 czy Font Awesome jest square-o, padding jest dostosowany, aby zapewnić równomierny przerywany kontur na ostrości(patrz poniżej).

1. Dodaj checkbox checked skin

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

\00f046 jest Fontem check-square-o, który nie jest tą samą szerokością co square-o, co jest powodem stylu width powyżej.

1. Add focus outline

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

   W tym samym czasie, w przeciwieństwie do poprzednich wersji, Safari nie jest w pełni kompatybilne z Safari.]}

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

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

3. Ustaw Cień najazdu na niezabezpieczone pole wyboru

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

Przetestuj to na js Fiddle

Spróbuj najechać myszką na pola wyboru i użyj Tab i Shift+Tab, aby przenieść i Spacja , aby przełączyć.

Proste do wdrożenia i łatwo konfigurowalne rozwiązanie

Po wielu poszukiwaniach i testach otrzymałem rozwiązanie, które jest proste do wdrożenia i łatwiejsze do dostosowania. w tym roztworze :

1. nie potrzebujesz zewnętrznych bibliotek i plików
2. nie musisz dodawać extra HTML in your page
3. nie musisz zmieniać nazw pól wyboru i id

Proste umieść płynny CSS na górze strony, a styl wszystkich pól wyboru zmieni się tak to:

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

<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Checkbox</label>

Możesz stylować checkboxy z małą sztuczką używając elementu label 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 a FIDDLE dla powyższego kodu. Zauważ, że niektóre CSS nie działa w starszych wersjach przeglądarek, ale jestem pewien, że istnieją jakieś fantazyjne przykłady JavaScript tam!

Można uniknąć dodawania dodatkowych znaczników. Działa to wszędzie oprócz IE dla komputerów stacjonarnych (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" />

Z czystym CSS, nic fantazyjnego z :before i :after, bez przekształceń, możesz wyłączyć domyślny wygląd, a następnie styl go z obrazem tła w wierszu, jak w poniższym przykładzie. Działa to w przeglądarkach Chrome, Firefox, Safari i NOW 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>

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

(Poniżej znajduje się statyczny obraz, dzięki czemu możesz wizualizować wynik; Zobacz JSFiddle dla interaktywnej wersji.)

Podobnie jak w przypadku innych rozwiązań, używa elementu label. Obok span znajduje się nasze pole wyboru charakter.

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

2021 rozwiązanie-dostępne czyste pola wyboru CSS i przyciski radiowe bez zewnętrznych zależności

Przewijałem i przewijałem i Tony tych odpowiedzi po prostu wyrzucają dostępność za drzwi i naruszają WCAG w więcej niż jeden sposób. Dodałem przyciski radiowe, ponieważ przez większość czasu, gdy używasz niestandardowych pól wyboru, chcesz również niestandardowe przyciski radiowe.

:

• Checkboxes - czysty CSS-wolny od 3rd biblioteki stron
• przyciski radiowe - czysty CSS-free z bibliotek stron trzecich
• pola wyboru * które używają FontAwesome, ale mogą być zamienione na Gliphicons, itp. łatwo

To wszystko JavaScript free, Dostępne , oraz biblioteka zewnętrzna wolna *...

Jeśli chcesz podłączyć N-play z którymkolwiek z nich, po prostu skopiuj arkusz stylów z fiddles, edytuj kody kolorów w CSS, aby dopasować je do swoich potrzeb i ruszaj w drogę. Możesz dodać niestandardową ikonę znacznika zaznaczenia svg, jeśli chcesz dla tych pól wyboru. Dodałem wiele komentarzy dla tych nie-CSS ' y ludzi.

Jeśli masz długi tekst lub mały kontener i napotykasz zawijanie tekstu pod pole wyboru lub przyciskiem radiowym, po prostu przekonwertuj na divs w ten sposób .

Dłuższe Wyjaśnienie: Potrzebowałem rozwiązania, które nie narusza WCAG, nie opiera się na JavaScript lub zewnętrznych bibliotekach, i które nie łamie nawigacji klawiatury, takiej jak tabbing lub Spacja, aby wybrać, które pozwala na zdarzenia fokus, rozwiązanie, które pozwala na wyłączone pola wyboru, które są zarówno zaznaczone, jak i niezaznaczone, i wreszcie rozwiązanie, w którym mogę dostosować wygląd pola wyboru, jednak chcę z różnych {2]}'s'., border-radius, svg tła, itd.

Użyłem kombinacji tej odpowiedzi od @ Jan Turoň, aby wymyślić 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 z przyciskami radiowymi.

Nadal uczę się dostępności, więc jeśli coś przeoczyłem, proszę o komentarz i postaram się to poprawić oto przykład kodu moich checkboxów:

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 green #e7ffba, change this to change the color) */
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>

<p>You can easily change the background color, checkbox symbol, border-radius, etc.</p>

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

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>

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

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

Przykład

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 opcji appearance. Z moich osobistych testów mam tylko Opera i Chrome działa poprawnie. Ale to byłby sposób, aby zachować to proste, gdy lepiej wsparcie przychodzi lub chcesz używać tylko Chrome / Opera.

"mogę użyć?"link

Możesz po prostu użyć appearance: none w nowoczesnych przeglądarkach, aby nie było domyślnej stylizacji i wszystkie Twoje style są poprawnie stosowane:

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

Z mojego googlowania, jest to najprostszy sposób na stylizację checkboxów. Wystarczy dodać :after I :checked:after CSS na podstawie Twojego projektu.

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>

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

Używam FontAwseome icons, ale można 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;
}

Modyfikuj styl pola wyboru za pomocą zwykłego CSS3, nie wymaga żadnej manipulacji 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>

Myślę, że najprostszym sposobem na to jest stylizacja label i uczynienie checkbox niewidzialnym.

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, nadal będzie dostępny, a jego wartość zostanie wysłana po przesłaniu formularza. W przypadku starych przeglądarek może być konieczna zmiana klasy label na sprawdzaną przy użyciu JavaScript, ponieważ nie sądzę, aby stare wersje Internet Explorera rozumiały ::checked na checkbox.

Prosty i lekki szablon również:

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/

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

Jako zapowiedź, nie jest to implementacja CSS. Pomyślałem, że podzielę się obejściem, które wymyśliłem na wypadek, gdyby ktoś inny uznał to za przydatne.

Użyłem elementu HTML5 canvas.

Plusem 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 renderować go poprawnie, wtedy nie ma alternatywy. Choć kwestia ta pozostaje kwestią w 2017 roku jest dyskusyjna.

Update

Stary kod okazał się 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;
    }
});

Otodziałające demo .

Nowa wersja wykorzystuje prototypy i dziedziczenie różnicowe, aby stworzyć wydajny system do tworzenia pól wyboru. Aby utworzyć pole wyboru:

var my_checkbox = Checkbox.create();

Spowoduje to natychmiastowe dodanie pola wyboru do domu i podłączyć wydarzenia. Aby sprawdzić, czy pole wyboru jest zaznaczone:

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

Ważne jest również to, że pozbyłem się pętli.

Update 2

Coś, o czym zapomniałem wspomnieć w ostatniej aktualizacji jest to, że korzystanie z płótna ma więcej zalet niż tylko tworzenie pola wyboru, które wygląda tak, jak chcesz, aby wyglądało. Możesz również utworzyć multi-state checkboxes, 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 Checkbox użyty w ostatnim fragmencie tak, że jest bardziej ogólny, co umożliwia "rozszerzenie" go z checkbox, który ma 3 Stany. Oto demo . Jak widać, ma już więcej funkcjonalności niż wbudowane pole wyboru.

Coś, co należy wziąć pod uwagę przy wyborze pomiędzy JavaScript i CSS.

Stary, źle zaprojektowany kod

Demo Robocze

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 na samą aktualizację płótna.

(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 uczynienie go interaktywnym. Na szczęście to całkiem proste:

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

Tutaj możesz mieć problemy w IE, ze względu na ich dziwny model obsługi zdarzeń w JavaScript.

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

Jest to najprostszy sposób i możesz wybrać, które pola wyboru mają nadawać 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ń 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 JsFiddle link

Tutaj jest wersja tylko CSS / HTML, nie jQuery lub JavaScript potrzebne w ogóle, prosty i czysty HTML i 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;
}

To może być dostosowane, aby móc mieć indywidualne radio lub checkboxes, groups checkboxes i grupy przycisków radiowych, jak również.

Ten html / css, pozwoli Ci również uchwycić kliknięcie na Etykieta, więc pole wyboru będzie zaznaczone i odznaczone, nawet jeśli klikniesz tylko na etykiecie.

Ten typ pola wyboru / przycisku opcji działa idealnie z każdym formularzem, nie ma problemu. Zostały przetestowane przy użyciu PHP, ASP.NET (.aspx), JavaServer Faces oraz 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;
    }

Implementacja SCSS / SASS

Bardziej nowoczesne podejście

Dla osób korzystających z SCSS (lub łatwo przekonwertowanych na SASS) pomocne będą następujące informacje. Skutecznie zrób element obok pola wyboru, który będzie stylizowany. Po kliknięciu pola wyboru, CSS zmieni styl elementu siostrzanego (na nowy, zaznaczony styl). Kod znajduje się poniżej:

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

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

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}

<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>

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

Nie, nadal nie możesz wystylizować samego pola wyboru, ale (w końcu) wymyśliłem, jak wystylizować iluzję podczas zachowując funkcjonalność klikania pola wyboru. Oznacza to, że możesz go przełączać, nawet jeśli kursor nie jest idealnie nieruchomy, bez ryzyka wybrania tekstu lub wyzwalania przeciągania i upuszczania!

To rozwiązanie prawdopodobnie pasuje również do przycisków radiowych.

Poniższe rozwiązanie działa w przeglądarce Internet Explorer 9, Firefox 30.0 i Chrome 40.0.2214.91 i jest tylko podstawowym przykładem. Możesz nadal używaj go w połączeniu z obrazami tła i pseudoelementami.

Http://jsfiddle.net/o0xo13yL/1/

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

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

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

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

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

Ponieważ przeglądarki takie jak Edge i Firefox nie obsługują znaczników wejściowych: before: after na checkbox, tutaj jest alternatywa wyłącznie z HTML i CSS. Oczywiście powinieneś edytować CSS zgodnie ze swoimi wymaganiami.

Utwórz pole wyboru HTML w następujący sposób:

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

Zastosuj ten styl dla pola wyboru, aby zmienić etykietę koloru

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

Wydaje się, że możesz zmienić kolor pola wyboru w skali szarości, używając tylko CSS.

Poniższy konwertuje pola wyboru z czarnego na szary (co było o tym, co chciałem):

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

Oto przykład, z obsługą motywu. Jest to nowoczesne podejście do przejść CSS. Nie ma absolutnie żadnego JavaScript wymagane.

Otrzymałem następujący kod linked in this comment ; on A related question.

Edit: dodałem przyciski radiowe, jak sugeruje maxshuty .

const selector = '.grid-container > .grid-row > .grid-col[data-theme="retro"]';
const main = () => {
  new CheckboxStyler().run(selector);
  new RadioStyler().run(selector);
};

/*
 * This is only used to add the wrapper class and checkmark span to an existing DOM,
 * to make this CSS work.
 */
class AbstractInputStyler {
  constructor(options) {
    this.opts = options;
  }
  run(parentSelector) {
    let wrapperClass = this.opts.wrapperClass;
    let parent = document.querySelector(parentSelector) || document.getElementsByTagName('body')[0];
    let labels = parent.querySelectorAll('label');
    if (labels.length) labels.forEach(label => {
      if (label.querySelector(`input[type="${this.opts._inputType}"]`)) {
        if (!label.classList.contains(wrapperClass)) {
          label.classList.add(wrapperClass);
          label.appendChild(this.__createDefaultNode());
        }
      }
    });
    return this;
  }
  /* @protected */
  __createDefaultNode() {
    let checkmark = document.createElement('span');
    checkmark.className = this.opts._activeClass;
    return checkmark;
  }
}

class CheckboxStyler extends AbstractInputStyler {
  constructor(options) {
    super(Object.assign({
      _inputType: 'checkbox',
      _activeClass: 'checkmark'
    }, CheckboxStyler.defaultOptions, options));
  }
}
CheckboxStyler.defaultOptions = {
  wrapperClass: 'checkbox-wrapper'
};

class RadioStyler extends AbstractInputStyler {
  constructor(options) {
    super(Object.assign({
      _inputType: 'radio',
      _activeClass: 'pip'
    }, RadioStyler.defaultOptions, options));
  }
}
RadioStyler.defaultOptions = {
  wrapperClass: 'radio-wrapper'
};

main();

/* Theming */

:root {
  --background-color: #FFF;
  --font-color: #000;
  --checkbox-default-background: #EEE;
  --checkbox-hover-background: #CCC;
  --checkbox-disabled-background: #AAA;
  --checkbox-selected-background: #1A74BA;
  --checkbox-selected-disabled-background: #6694B7;
  --checkbox-checkmark-color: #FFF;
  --checkbox-checkmark-disabled-color: #DDD;
}

[data-theme="dark"] {
  --background-color: #111;
  --font-color: #EEE;
  --checkbox-default-background: #222;
  --checkbox-hover-background: #444;
  --checkbox-disabled-background: #555;
  --checkbox-selected-background: #2196F3;
  --checkbox-selected-disabled-background: #125487;
  --checkbox-checkmark-color: #EEE;
  --checkbox-checkmark-disabled-color: #999;
}

[data-theme="retro"] {
  --background-color: #FFA;
  --font-color: #000;
  --checkbox-default-background: #EEE;
  --checkbox-hover-background: #FFF;
  --checkbox-disabled-background: #BBB;
  --checkbox-selected-background: #EEE;
  --checkbox-selected-disabled-background: #BBB;
  --checkbox-checkmark-color: #F44;
  --checkbox-checkmark-disabled-color: #D00;
}


/* General styles */

html {
  width: 100%;
  height: 100%;
}

body {
  /*background: var(--background-color); -- For demo, moved to column. */
  /*color:      var(--font-color);       -- For demo, moved to column. */
  background: #777;
  width: calc(100% - 0.5em);
  height: calc(100% - 0.5em);
  padding: 0.25em;
}

h1 {
  font-size: 1.33em !important;
}

h2 {
  font-size: 1.15em !important;
  margin-top: 1em;
}


/* Grid style - using flex */

.grid-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex: 1;
}

.grid-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin: 0.25em 0;
}

.grid-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 1em;
  flex: 1;
  margin: 0 0.25em;
  /* If not demo, remove and uncomment the body color rules */
  background: var(--background-color);
  color: var(--font-color);
}

.grid-cell {
  width: 100%;
  height: 100%;
}


/* The checkbox wrapper */

.checkbox-wrapper,
.radio-wrapper {
  display: block;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox and radio buttons */

.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.radio-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom checkbox */

.checkbox-wrapper .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  background-color: var(--checkbox-default-background);
  transition: all 0.2s ease-in;
}

.radio-wrapper .pip {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background-color: var(--checkbox-default-background);
  transition: all 0.2s ease-in;
}


/* Disabled style */

.checkbox-wrapper input[type="checkbox"]:disabled~.checkmark,
.radio-wrapper input[type="radio"]:disabled~.pip {
  cursor: not-allowed;
  background-color: var(--checkbox-disabled-background);
  color: var(--checkbox-checkmark-disabled-color);
}

.checkbox-wrapper input[type="checkbox"]:disabled~.checkmark:after,
.radio-wrapper input[type="radio"]:disabled~.pip:after {
  color: var(--checkbox-checkmark-disabled-color);
}

.checkbox-wrapper input[type="checkbox"]:disabled:checked~.checkmark,
.radio-wrapper input[type="radio"]:disabled:checked~.pip {
  background-color: var(--checkbox-selected-disabled-background);
}


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

.checkbox-wrapper:hover input[type="checkbox"]:not(:disabled):not(:checked)~.checkmark,
.radio-wrapper:hover input[type="radio"]:not(:disabled):not(:checked)~.pip {
  background-color: var(--checkbox-hover-background);
}


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

.checkbox-wrapper input[type="checkbox"]:checked~.checkmark,
.radio-wrapper input[type="radio"]:checked~.pip {
  background-color: var(--checkbox-selected-background);
}


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

.checkbox-wrapper .checkmark:after {
  display: none;
  width: 100%;
  position: absolute;
  text-align: center;
  content: "\2713";
  color: var(--checkbox-checkmark-color);
  line-height: 1.1em;
}

.radio-wrapper .pip:after {
  display: none;
  width: 100%;
  position: absolute;
  text-align: center;
  content: "\2022";
  color: var(--checkbox-checkmark-color);
  font-size: 1.5em;
  top: -0.2em;
}


/* Show the checkmark when checked */

.checkbox-wrapper input[type="checkbox"]:checked~.checkmark:after {
  display: block;
  line-height: 1.1em;
}

.radio-wrapper input[type="radio"]:checked~.pip:after {
  display: block;
  line-height: 1.1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<div class="grid-container">
  <div class="grid-row">
    <div class="grid-col">
      <div class="grid-cell">
        <h1>Pure CSS</h1>
        <h2>Checkbox</h2>
        <label class="checkbox-wrapper">One
          <input type="checkbox" checked="checked">
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Two
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Three
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Four
          <input type="checkbox" disabled>
          <span class="checkmark"></span>
        </label>
        <h2>Radio</h2>
        <label class="radio-wrapper">One
          <input type="radio" name="group-x">
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Two
          <input type="radio" name="group-x">
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Three
          <input type="radio" name="group-x" checked disabled>
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Four
          <input type="radio" name="group-x" disabled>
          <span class="pip"></span>
        </label>
      </div>
    </div>
    <div class="grid-col" data-theme="dark">
      <div class="grid-cell">
        <h1>Pure CSS</h1>
        <h2>Checkbox</h2>
        <label class="checkbox-wrapper">One
          <input type="checkbox" checked="checked">
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Two
          <input type="checkbox">
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Three
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
        </label>
        <label class="checkbox-wrapper">Four
          <input type="checkbox" disabled>
          <span class="checkmark"></span>
        </label>
        <h2>Radio</h2>
        <label class="radio-wrapper">One
          <input type="radio" name="group-y">
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Two
          <input type="radio" name="group-y">
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Three
          <input type="radio" name="group-y" checked disabled>
          <span class="pip"></span>
        </label>
        <label class="radio-wrapper">Four
          <input type="radio" name="group-y" disabled>
          <span class="pip"></span>
        </label>
      </div>
    </div>
    <div class="grid-col" data-theme="retro">
      <div class="grid-cell">
        <h1>JS + CSS</h1>
        <h2>Checkbox</h2>
        <label>One   <input type="checkbox" checked="checked"></label>
        <label>Two   <input type="checkbox"></label>
        <label>Three <input type="checkbox" checked disabled></label>
        <label>Four  <input type="checkbox" disabled></label>
        <h2>Radio</h2>
        <label>One   <input type="radio" name="group-z" checked="checked"></label>
        <label>Two   <input type="radio" name="group-z"></label>
        <label>Three <input type="radio" name="group-z" checked disabled></label>
        <label>Four  <input type="radio" name="group-z" disabled></label>
      </div>
    </div>
  </div>
</div>