Jest sposób, aby to zrobić, używając tylko CSS. Zamiast tego możemy (ab)użyć label elementu i stylu. Zastrzeżenie jest takie, że nie będzie to działać w IE8 i niższych wersjach.

CSS:

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    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");
}

HTML:

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

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, myślę, ż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. FF + IE nadal będzie pozwalał na funkcjonowanie checkboxów, po prostu niestandardowych, a to, miejmy nadzieję, zmieni się w przyszłości(kod nie używa przedrostków vendor).

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>

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 stylizować w zależności 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 alllow 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>

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!

Posłuchałbym rady odpowiedzi SW4 - aby ukryć checkbox i pokryć go niestandardowym span, 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 polecaFont 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. appearance: none, patrz Joost ' s odpowiedź :

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

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

5. Dodaj zarys ostrości

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

   Safari nie zapewnia tej funkcji( zobacz komentarz @ Jason Sankey), powinieneś użyć window.navigator, aby wykryć przeglądarkę i pominąć ją, jeśli jest to Safari.

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

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

7. Ustaw Cień najazdu na niezabezpieczone pole wyboru

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

Demo Fiddle

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

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

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

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

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

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

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

<label><input type="checkbox"><span>send newsletter</span></label><br>
<label><input type="checkbox" checked disabled><span>I doubt it</span></label><br>
<label><input type="checkbox" disabled><span>well I never</span></label><br>
<label><input type="checkbox"><span>I agree with terms of use</span></label><br>
<label><input type="checkbox"><span>check to confirm</span></label>

Spróbuj aby najechać myszką na pola wyboru i użyć 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;
}

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 obrazek, dzięki któremu możesz zwizualizować wynik; Zobacz JSFiddle dla wersji interaktywnej)

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

/*