Wie man ein Kontrollkästchen mit CSS gestaltet

Question

Ich versuche, ein Kontrollkästchen mit dem folgenden Stil:

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

Aber der Stil wird nicht angewendet. Das Kontrollkästchen zeigt immer noch die Standardvorlage an. Wie kann ich ihm den angegebenen Stil geben?

Answer 1

UPDATE:

Die unten stehende 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 mit dem von Ihnen bevorzugten Styling zu ersetzen, ohne JavaScript zu verwenden.

Hier sind einige nützliche Links:

• Erstellen von benutzerdefinierten Formular-Checkboxen nur mit CSS
• Einfacher CSS-Checkbox-Generator
• Dinge, die Sie mit dem Checkbox-Hack tun können
• Implementierung von benutzerdefinierten Kontrollkästchen und Optionsschaltflächen mit CSS3
• Wie man ein Kontrollkästchen mit CSS gestaltet

Es sei darauf hingewiesen, dass sich das grundlegende Problem nicht geändert hat. Sie können nach wie vor keine Stile (Rahmen usw.) direkt auf das Ankreuzfeld-Element anwenden und diese Stile die Anzeige des HTML-Ankreuzfeldes beeinflussen lassen. Was sich jedoch geändert hat, ist, dass es jetzt möglich ist, das eigentliche Kontrollkästchen auszublenden und es durch ein eigenes Stilelement zu ersetzen, und zwar ausschließlich mit CSS. Vor allem, weil CSS jetzt eine weithin unterstützte :checked Selektor können Sie dafür sorgen, dass Ihre Ersetzung den angekreuzten Status des Feldes korrekt wiedergibt.

---

ÄLTERE ANTWORT

Voici ein nützlicher Artikel über die Gestaltung von Kontrollkästchen . Der Autor stellte fest, dass es von Browser zu Browser sehr unterschiedlich ist und dass viele Browser immer das Standard-Kontrollkästchen anzeigen, egal wie Sie es gestalten. Es gibt also wirklich keinen einfachen Weg.

Es ist nicht schwer, sich eine Umgehung vorzustellen, bei der Sie JavaScript verwenden, um ein Bild über das Kontrollkästchen zu legen und Klicks auf dieses Bild dazu führen, dass das echte Kontrollkästchen aktiviert wird. Benutzer ohne JavaScript würden das Standard-Kontrollkästchen sehen.

Bearbeitet und hinzugefügt: hier ist ein nettes Skript, das dies für Sie erledigt Es blendet das eigentliche Checkbox-Element aus, ersetzt es durch einen gestylten Span und leitet die Click-Events um.

Answer 2

Sie können mit den neuen Fähigkeiten, die mit der Funktion :after y :before Pseudoklassen. Der Vorteil dabei ist: Sie müssen dem DOM nichts mehr hinzufügen, nur das Standard-Kontrollkästchen.

Beachten Sie, dass dies nur bei kompatiblen Browsern funktioniert. Ich glaube, das hängt damit zusammen, dass einige Browser es nicht erlauben, die :after y :before auf Eingabeelemente. Das bedeutet leider, dass im Moment nur WebKit-Browser unterstützt werden. Firefox und Internet Explorer lassen die Kontrollkästchen noch funktionieren, nur ungestylt, und das 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 Fiddle

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

Answer 3

Bevor Sie beginnen (Stand: Januar 2015)

Die ursprüngliche Frage und die dazugehörige Antwort sind jetzt etwa 5 Jahre alt. Daher ist dies eine kleine Aktualisierung.

Erstens gibt es eine Reihe von Ansätzen für die Gestaltung von Kontrollkästchen. Der Grundgedanke ist:

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

2. Auch wenn das Steuerelement ausgeblendet ist, müssen Sie in der Lage sein, seinen markierten Zustand zu erkennen und umzuschalten.

3. Der aktivierte Zustand des Kontrollkästchens muss durch die Gestaltung eines neuen Elements wiedergegeben werden.

Die (prinzipielle) Lösung

Dies kann auf verschiedene Weise erreicht werden - und man hört oft, dass die Verwendung von CSS3-Pseudoelementen der richtige Weg ist. Eigentlich gibt es keinen richtigen oder falschen Weg, es hängt von der Herangehensweise ab, die am besten für den Kontext geeignet ist, in dem Sie sie verwenden werden. Davon abgesehen, habe ich eine bevorzugte Methode.

1. Verpacken Sie Ihr Kontrollkästchen in eine label Element. Das bedeutet, dass Sie auch dann, wenn das Element ausgeblendet ist, durch Klicken auf eine beliebige Stelle in der Beschriftung die Markierung umschalten können.

2. Ihr Kontrollkästchen ausblenden.

3. Ein neues Element hinzufügen nach das Kontrollkästchen, das Sie entsprechend gestalten werden. Es muss nach dem Ankreuzfeld erscheinen, damit es mit CSS ausgewählt und in Abhängigkeit von der :checked Zustand. 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!" höre ich Sie rufen. Was ist, wenn ich ein nettes kleines Häkchen oder Kreuzchen in das Kästchen machen will? Und ich will keine Hintergrundbilder verwenden!

Hier können die Pseudo-Elemente von CSS3 ins Spiel kommen. Diese unterstützen die content Eigenschaft, die es Ihnen ermöglicht, die Unicode-Symbole die einen der beiden Staaten repräsentieren. Alternativ können Sie auch eine Font-Icon-Quelle eines Drittanbieters wie Font Awesome verwenden (stellen Sie jedoch sicher, dass Sie auch die relevanten font-family z.B. an 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>

Answer 4

Es gibt eine Möglichkeit, dies nur mit CSS zu tun. Wir können (miss)brauchen die label Element und gestalten Sie stattdessen dieses Element. Der Vorbehalt ist, dass dies nicht für Internet Explorer 8 und niedrigere Versionen funktionieren wird.

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

Answer 5

2022 zugänglich Lösung - Verwendung accent-color

Verwenden Sie die neue accent-color Eigentum und stellen Sie sicher, dass Sie eine angemessene Kontrastverhältnis von mindestens 3:1 zu gewährleisten Zugänglichkeit . Dies gilt auch für radio Tasten.

.red-input {
    accent-color: #9d3039;
    height: 20px; /* not needed */
    width: 20px; /* not needed */
}

<input class="red-input" type="checkbox" />

<!-- Radio button example -->
<input class="red-input" type="radio" />