Ich versuche, ein Kontrollkästchen wie folgt zu gestalten:

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

Der Stil wird jedoch nicht angewendet. Das Kontrollkästchen zeigt weiterhin den Standardstil an. Wie gebe ich ihm den angegebenen Stil?

AKTUALISIEREN:

Die folgende Antwort bezieht sich auf den Stand der Dinge vor der weit verbreiteten Verfügbarkeit von CSS 3. In modernen Browsern (einschließlich Internet Explorer 9 und höher) ist es einfacher, Kontrollkästchen-Ersetzungen mit Ihrem bevorzugten Stil zu erstellen, ohne JavaScript zu verwenden.

Hier sind einige nützliche Links:

• Erstellen von benutzerdefinierten Formular-Kontrollkästchen mit nur CSS
• Einfacher CSS Checkbox Generator
• Dinge, die Sie mit dem Checkbox-Hack tun können
• Implementieren von benutzerdefinierten Kontrollkästchen und Optionsfeldern mit CSS3
• So gestalten Sie ein Kontrollkästchen mit CSS

Es ist erwähnenswert, dass sich das grundlegende Problem nicht geändert hat. Sie können Stile (Rahmen usw.) immer noch nicht direkt auf das Kontrollkästchenelement anwenden und diese Stile wirken sich auf die Anzeige des HTML-Kontrollkästchens aus. Was sich jedoch geändert hat, ist, dass es jetzt möglich ist, das eigentliche Kontrollkästchen auszublenden und durch ein eigenes gestaltetes Element zu ersetzen, wobei nur CSS verwendet wird. Insbesondere, da CSS jetzt über eine weit verbreitete :checkedAuswahl verfügt, können Sie dafür sorgen, dass Ihr Ersatz den aktivierten Status des Kontrollkästchens korrekt wiedergibt.

ÄLTERE ANTWORT

Hier ist ein nützlicher Artikel zum Stylen von Kontrollkästchen . Grundsätzlich stellte dieser Autor fest, dass es von Browser zu Browser sehr unterschiedlich ist und dass viele Browser immer das Standard-Kontrollkästchen anzeigen, unabhängig davon, wie Sie es gestalten. Es gibt also wirklich keinen einfachen Weg.

Es ist nicht schwer, sich eine Problemumgehung vorzustellen, bei der Sie mit JavaScript ein Bild über das Kontrollkästchen legen und durch Klicken auf dieses Bild das eigentliche Kontrollkästchen aktivieren. Benutzern ohne JavaScript wird das Standard-Kontrollkästchen angezeigt.

Bearbeitet, um hinzuzufügen: Hier ist ein schönes Skript, das dies für Sie erledigt ; Es verbirgt das eigentliche Kontrollkästchenelement, ersetzt es durch einen gestalteten Bereich und leitet die Klickereignisse um.

Es gibt eine Möglichkeit, dies nur mit CSS zu tun. Wir können das labelElement (ab) verwenden und stattdessen dieses Element formatieren. Die Einschränkung ist, dass dies für Internet Explorer 8 und niedrigere Versionen nicht funktioniert.

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

Sie können einen ziemlich coolen benutzerdefinierten Checkbox-Effekt erzielen, indem Sie die neuen Fähigkeiten verwenden, die mit den Klassen :afterund :beforepseudo geliefert werden. Dies hat den Vorteil, dass Sie dem DOM nichts mehr hinzufügen müssen, sondern nur das Standard-Kontrollkästchen.

Beachten Sie, dass dies nur für kompatible Browser funktioniert. Ich glaube, dies hängt mit der Tatsache zusammen, dass einige Browser das Einstellen von :afterund nicht zulassen:before Eingabe- Eingabeelemente . Dies bedeutet leider, dass derzeit nur WebKit-Browser unterstützt werden. In Firefox + Internet Explorer können die Kontrollkästchen weiterhin funktionieren, nur nicht gestylt, und dies wird sich hoffentlich in Zukunft ändern (der Code verwendet keine Herstellerpräfixe).

Dies ist nur eine WebKit-Browserlösung (Chrome-, Safari-, Mobile-Browser).

Siehe Beispiel Geige

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

Flipswitch-Geige im Bonus-Webkit-Stil

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

Bevor Sie beginnen (Stand: Januar 2015)

Die ursprüngliche Frage und Antwort sind jetzt ~ 5 Jahre alt. Als solches ist dies ein kleines Update.

Erstens gibt es eine Reihe von Ansätzen, wenn es darum geht, Kontrollkästchen zu gestalten. Der Grundgedanke ist:

1. Sie müssen das von Ihrem Browser gestaltete Standard-Kontrollkästchen-Steuerelement ausblenden, das mit CSS nicht sinnvoll überschrieben werden kann.

2. Wenn das Steuerelement ausgeblendet ist, müssen Sie weiterhin in der Lage sein, den aktivierten Status zu erkennen und umzuschalten

3. Der aktivierte Status des Kontrollkästchens muss durch das Stylen eines neuen Elements wiedergegeben werden

Die Lösung (im Prinzip)

Dies kann auf verschiedene Weise erreicht werden - und Sie werden oft hören, dass die Verwendung von CSS3-Pseudoelementen der richtige Weg ist. Tatsächlich gibt es keinen richtigen oder falschen Weg, es hängt von dem Ansatz ab, der für den Kontext, in dem Sie ihn verwenden, am besten geeignet ist. Trotzdem habe ich einen bevorzugten.

1. Schließen Sie Ihr Kontrollkästchen in ein labelElement ein. Dies bedeutet, dass Sie auch wenn es ausgeblendet ist, den aktivierten Status umschalten können, wenn Sie auf eine beliebige Stelle innerhalb des Etiketts klicken.

2. Verstecke dein Kontrollkästchen

3. Fügen Sie nach dem Kontrollkästchen ein neues Element hinzu, das Sie entsprechend formatieren. Es muss nach dem Kontrollkästchen angezeigt werden, damit es mithilfe von CSS ausgewählt und abhängig vom :checkedStatus gestaltet werden kann. CSS kann nicht "rückwärts" auswählen.

Die Lösung (im Code)

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>

Verfeinerung (mit Symbolen)

Aber hey! Ich höre dich schreien. Was ist, wenn ich ein schönes kleines Häkchen oder Kreuz in der Box zeigen möchte? Und ich möchte keine Hintergrundbilder verwenden!

Nun, hier können die Pseudoelemente von CSS3 ins Spiel kommen. Diese unterstützen die contentEigenschaft, mit der Sie Unicode-Symbole einfügen können, die einen der beiden Zustände darstellen. Alternativ können Sie auch eine Schriftart-Symbolquelle eines Drittanbieters verwenden, z. B. font awesome (stellen Sie jedoch sicher, dass Sie auch die entsprechenden Einstellungen vornehmen font-family, z. B. auf 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>

Ich würde dem Rat der Antwort von SW4 folgen - das Kontrollkästchen auszublenden und es mit einer benutzerdefinierten Spanne abzudecken, indem ich diesen HTML-Code vorschlage:

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

Durch das ordentliche Umbrechen des Etiketts können Sie auf den Text klicken, ohne dass eine Attributverknüpfung "for-id" erforderlich ist. Jedoch,

Verstecke es nicht mit visibility: hiddenoderdisplay: none

Es funktioniert durch Klicken oder Tippen, aber das ist eine lahme Art, Kontrollkästchen zu verwenden. Einige Leute verwenden immer noch viel effektiver Tab, um den Fokus zu verschieben, Spacezu aktivieren und mit dieser Methode zu verstecken, um ihn zu deaktivieren. Wenn das Formular lang ist, werden die Handgelenke tabindexoder accesskeyAttribute einer Person gespeichert . Und wenn Sie das Verhalten des System-Kontrollkästchens beobachten, ist beim Schweben ein anständiger Schatten zu sehen. Das gut gestaltete Kontrollkästchen sollte diesem Verhalten folgen.

In der Antwort von cobberboy wird Font Awesome empfohlen, was normalerweise besser als Bitmap ist, da Schriftarten skalierbare Vektoren sind. Wenn ich mit dem obigen HTML arbeite, würde ich folgende CSS-Regeln vorschlagen:

1. Kontrollkästchen ausblenden

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

   Ich verwende nur Negativ, z-indexda in meinem Beispiel ein Kontrollkästchen verwendet wird, das groß genug ist, um es vollständig abzudecken. Ich empfehle nicht, left: -999pxda es nicht in jedem Layout wiederverwendbar ist. Die Antwort von Bushan Wagh bietet eine kugelsichere Möglichkeit, sie zu verbergen und den Browser davon zu überzeugen, Tabindex zu verwenden. Daher ist sie eine gute Alternative. Auf jeden Fall ist beides nur ein Hack. Der richtige Weg ist heute appearance: none, siehe Joosts Antwort :

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

2. Beschriftung des Stil-Kontrollkästchens

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

3. Kontrollkästchen-Skin hinzufügen

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

   \00f096Bei Font Awesome wird die square-oPolsterung so angepasst, dass der Fokus gleichmäßig gepunktet ist (siehe unten).

4. Kontrollkästchen aktivierte Skin hinzufügen

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

   \00f046ist Font Awesome's check-square-o, das nicht die gleiche Breite hat wie square-o, was der Grund für den obigen Breitenstil ist.

5. Fokusumriss hinzufügen

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

   Safari bietet diese Funktion nicht (siehe @ Jason Sankeys Kommentar). Sie sollten sie verwenden window.navigator, um den Browser zu erkennen und ihn zu überspringen, wenn es sich um Safari handelt.

6. Aktivieren Sie das Kontrollkästchen Grau für deaktiviertes Kontrollkästchen

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

7. Aktivieren Sie das Kontrollkästchen Schwebeschatten für nicht deaktiviertes Kontrollkästchen

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

Demo Geige

Versuchen Sie, die Maus über die Kontrollkästchen zu bewegen, und verwenden Sie Tabund Shift+ Tab, um sich zu bewegen und Spaceumzuschalten.

Sie können Kontrollkästchen mit ein wenig Trick mit dem folgenden labelElement formatieren:

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

Und ein FIDDLE für den obigen Code. Beachten Sie, dass einige CSS in älteren Browserversionen nicht funktionieren, aber ich bin sicher, dass es einige ausgefallene JavaScript-Beispiele gibt!

Einfach zu implementierende und leicht anpassbare Lösung

Nach vielen Suchen und Tests habe ich diese Lösung erhalten, die einfach zu implementieren und einfacher anzupassen ist. In dieser Lösung :

1. Sie benötigen keine externen Bibliotheken und Dateien
2. Sie müssen Ihrer Seite keinen zusätzlichen HTML-Code hinzufügen
3. Sie müssen die Namen und die ID der Kontrollkästchen nicht ändern

Platzieren Sie einfach das fließende CSS oben auf Ihrer Seite, und alle Kontrollkästchen ändern sich wie folgt:

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

Sie können das Hinzufügen zusätzlicher Markups vermeiden. Dies funktioniert überall außer im IE für Desktop (funktioniert jedoch im IE für Windows Phone und Microsoft Edge) über die Einstellung von 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" />

Ich bevorzuge die Verwendung von Symbolschriftarten (wie FontAwesome), da es einfach ist, ihre Farben mit CSS zu ändern, und sie auf Geräten mit hoher Pixeldichte sehr gut skaliert werden können. Hier ist eine weitere reine CSS-Variante, die ähnliche Techniken wie oben verwendet.

(Unten sehen Sie ein statisches Bild, mit dem Sie das Ergebnis visualisieren können. Eine interaktive Version finden Sie in der JSFiddle .)

Wie bei anderen Lösungen wird das labelElement verwendet. Ein nebenstehende spanenthält unser Kontrollkästchen.

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>

Hier ist die JSFiddle dafür.

Kürzlich habe ich eine interessante Lösung für das Problem gefunden.

Sie können appearance: none;den Standardstil des Kontrollkästchens deaktivieren und dann wie hier beschrieben Ihren eigenen darüber schreiben (Beispiel 4) .

Beispiel Geige

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

Leider ist die Browserunterstützung für die appearanceOption ziemlich schlecht . Nach meinen persönlichen Tests funktionierten nur Opera und Chrome ordnungsgemäß. Dies ist jedoch der richtige Weg, um es einfach zu halten, wenn eine bessere Unterstützung erzielt wird oder Sie nur Chrome / Opera verwenden möchten.

"Kann ich benutzen?" Verknüpfung

Mit reinem CSS, nichts Besonderes :beforeund :afterkeine Transformationen, können Sie das Standard-Erscheinungsbild deaktivieren und es dann mit einem Inline-Hintergrundbild wie im folgenden Beispiel formatieren. Dies funktioniert in Chrome, Firefox, Safari und jetzt in 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>

Meine Lösung

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>

Sie können es einfach appearance: nonein modernen Browsern verwenden, sodass es kein Standard-Styling gibt und alle Ihre Stile richtig angewendet werden:

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

Möchten Sie KEIN JavaScript, KEINE externen Bibliotheken, Konformität mit der Barrierefreiheit sowie Kontrollkästchen und Optionsfelder?

Ich habe gescrollt und gescrollt und Tonnen dieser Antworten werfen einfach die Zugänglichkeit aus der Tür und verletzen die WCAG auf mehr als eine Weise. Ich habe Optionsfelder eingefügt, da Sie die meiste Zeit, wenn Sie benutzerdefinierte Kontrollkästchen verwenden, auch benutzerdefinierte Optionsfelder möchten.

Geigen :

• Kontrollkästchen - reines CSS - frei von Bibliotheken von Drittanbietern
• Optionsfelder - reines CSS - frei von Bibliotheken von Drittanbietern
• Kontrollkästchen * , die FontAwesome verwenden, aber leicht mit Glyphicons usw. ausgetauscht werden können

Spät zur Party, aber irgendwie ist das 2019 bis 2020 immer noch schwierig. Deshalb habe ich meine drei Lösungen hinzugefügt, die zugänglich und leicht zu finden sind.

Diese sind alle JavaScript kostenlos , externe Bibliothek kostenlos * und zugänglich ...

Wenn Sie Plug-n-Play mit einem dieser Elemente durchführen möchten, kopieren Sie einfach das Stylesheet aus den Geigen, bearbeiten Sie die Farbcodes im CSS entsprechend Ihren Anforderungen und machen Sie sich auf den Weg. Sie können ein benutzerdefiniertes SVG-Häkchensymbol hinzufügen, wenn Sie die Kontrollkästchen verwenden möchten. Ich habe viele Kommentare für diese Nicht-CSS-Leute hinzugefügt.

Wenn Sie Langtext oder einen kleinen Behälter und stoßen Textumbruch unterhalb der Checkbox oder Radiobutton Eingang haben dann umbauen zu divs wie diese .

Längere Erklärung: Ich brauchte eine Lösung, die nicht gegen die WCAG verstößt, nicht auf JavaScript oder externen Bibliotheken basiert und die die Tastaturnavigation wie Tabulator oder Leertaste nicht unterbricht, um Fokusereignisse zu ermöglichen, eine Lösung, die deaktivierte Kontrollkästchen zulässt beide geprüft und ungeprüft sind, und schließlich eine Lösung , wo ich das Aussehen der Checkbox anpassen kann aber ich mit verschiedenen will background-color‚s, border-radius, svgHintergründe usw.

Ich habe eine Kombination dieser Antwort verwendet von @Jan Turoň verwendet, um meine eigene Lösung zu finden, die recht gut zu funktionieren scheint. Ich habe eine Optionsfeld-Geige erstellt, die den gleichen Code aus den Kontrollkästchen verwendet, damit dies auch mit Optionsfeldern funktioniert.

Ich lerne immer noch die Barrierefreiheit. Wenn ich etwas verpasst habe, schreibe bitte einen Kommentar und ich werde versuchen, ihn zu korrigieren. Hier ist ein Codebeispiel für meine Kontrollkästchen:

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>

Hier ist eine einfache CSS-Lösung ohne jQuery- oder JavaScript-Code.

Ich verwende FontAwseome-Symbole, aber Sie können jedes Bild verwenden

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

Nach meinem Googeln ist dies der einfachste Weg für das Styling von Kontrollkästchen. Fügen Sie einfach :afterund :checked:afterCSS basierend auf Ihrem Design hinzu.

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>

Ändern Sie den Kontrollkästchenstil mit einfachem CSS3. Es ist keine JS- und HTML-Bearbeitung erforderlich.

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

Eine einfache und leichte Vorlage:

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/

Ich denke, der einfachste Weg, dies zu tun, besteht darin, a zu stylen labelund das zu machencheckbox Unsichtbare zu machen.

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

Das checkbox, obwohl es versteckt ist, wird noch zugänglich sein, und sein Wert wird gesendet, wenn ein Formular abgeschickt wird. Für alten Browser müssen Sie möglicherweise die Klasse der Änderung labelJavaScript checked verwenden , weil ich nicht glaube , alte Versionen von Internet Explorer verstehen ::checkedauf dem checkbox.

Huch! All diese Problemumgehungen haben mich zu dem Schluss geführt, dass das HTML-Kontrollkästchen nicht funktioniert, wenn Sie es stylen möchten.

Als Warnung ist dies keine CSS-Implementierung. Ich dachte nur, ich würde die Problemumgehung teilen, die ich mir ausgedacht habe, falls jemand anderes sie nützlich finden könnte.

Ich habe das HTML5- canvasElement verwendet.

Der Vorteil dabei ist, dass Sie keine externen Bilder verwenden müssen und wahrscheinlich etwas Bandbreite sparen können.

Der Nachteil ist, dass es keinen Fallback gibt, wenn ein Browser es aus irgendeinem Grund nicht richtig rendern kann. Ob dies auch 2017 ein Thema bleibt, ist umstritten.

Aktualisieren

Ich fand den alten Code ziemlich hässlich und beschloss, ihn neu zu schreiben.

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

Hier ist eine funktionierende Demo .

Die neue Version verwendet Prototypen und differenzielle Vererbung, um ein effizientes System zum Erstellen von Kontrollkästchen zu erstellen. So erstellen Sie ein Kontrollkästchen:

var my_checkbox = Checkbox.create();

Dadurch wird das Kontrollkästchen sofort zum DOM hinzugefügt und die Ereignisse werden verknüpft. So fragen Sie ab, ob ein Kontrollkästchen aktiviert ist:

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

Wichtig ist auch, dass ich die Schleife losgeworden bin.

Update 2

Etwas, das ich im letzten Update nicht erwähnt habe, ist, dass die Verwendung der Zeichenfläche mehr Vorteile bietet, als nur ein Kontrollkästchen zu erstellen, das so aussieht, wie Sie es möchten. Wenn Sie möchten, können Sie auch Kontrollkästchen mit mehreren Status erstellen .

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

Ich habe das Checkboxim letzten Snippet verwendete Element geringfügig geändert , damit es allgemeiner ist, sodass es mit einem Kontrollkästchen mit 3 Status "erweitert" werden kann. Hier ist eine Demo . Wie Sie sehen, verfügt es bereits über mehr Funktionen als das integrierte Kontrollkästchen.

Beachten Sie Folgendes, wenn Sie zwischen JavaScript und CSS wählen.

Alter, schlecht gestalteter Code

Arbeitsdemo

Richten Sie zunächst eine Leinwand ein

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

Entwickeln Sie als Nächstes eine Möglichkeit, die Zeichenfläche selbst zu aktualisieren.

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

Der letzte Teil ist, es interaktiv zu machen. Zum Glück ist es ziemlich einfach:

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

Hier können Probleme im IE auftreten, da das Modell für die Ereignisbehandlung in JavaScript seltsam ist.

Ich hoffe das hilft jemandem; es passte definitiv zu meinen Bedürfnissen.

Dies ist der einfachste Weg und Sie können auswählen, welche Kontrollkästchen diesem Stil zugewiesen werden sollen.

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>

Kein JavaScript oder jQuery erforderlich .

Ändern Sie Ihren Kontrollkästchenstil auf einfache Weise.

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>

Hier ist der JsFiddle-Link

Hier ist eine reine CSS / HTML-Version, es wird überhaupt kein jQuery oder JavaScript benötigt, einfaches und sauberes HTML und wirklich einfaches und kurzes CSS.

Hier ist die JSFiddle

http://jsfiddle.net/v71kn3pr/

Hier ist der 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>

Hier ist das 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;
}

Dies kann angepasst werden, um einzelne Radio- oder Kontrollkästchen, Gruppen von Kontrollkästchen und Gruppen von Optionsfeldern zu haben.

Mit diesem HTML / CSS können Sie auch das Klicken auf das Etikett erfassen, sodass das Kontrollkästchen aktiviert und deaktiviert wird, selbst wenn Sie nur auf das Etikett klicken.

Diese Art von Kontrollkästchen / Optionsfeld funktioniert perfekt mit jeder Form, überhaupt kein Problem. Wurden auch mit PHP, ASP.NET (.aspx), JavaServer Faces und ColdFusion getestet .

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