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

Ich verwende immer Pseudoelemente :before y :after zum Ändern des Aussehens von Kontrollkästchen und Optionsfeldern. Es funktioniert wunderbar.

Siehe dies enlace für weitere Informationen

CODEPEN

Schritte

1. Ausblenden des Standard-Kontrollkästchens mit Hilfe von CSS-Regeln wie visibility:hidden o opacity:0 o position:absolute;left:-9999px usw.
2. Erstellen Sie ein gefälschtes Kontrollkästchen mit :before Element und übergeben Sie entweder ein leeres oder ein nicht umbrechendes Leerzeichen '\00a0' ;
3. Wenn das Kontrollkästchen aktiviert ist :checked Zustand, den Unicode content: "\2713" das ist ein Häkchen;
4. hinzufügen :focus Stil, um das Kontrollkästchen zugänglich zu machen.
5. Erledigt

Ich habe es folgendermaßen gemacht.

.box {
  background: #666666;
  color: #ffffff;
  width: 250px;
  padding: 10px;
  margin: 1em auto;
}
p {
  margin: 1.5em 0;
  padding: 0;
}
input[type="checkbox"] {
  visibility: hidden;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  border: 1px solid #333;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #333;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}

input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

<div class="content">
  <div class="box">
    <p>
      <input type="checkbox" id="c1" name="cb">
      <label for="c1">Option 01</label>
    </p>
    <p>
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option 02</label>
    </p>
    <p>
      <input type="checkbox" id="c3" name="cb">
      <label for="c3">Option 03</label>
    </p>
  </div>
</div>

Viel stilvoller mit :before y :after

body{
  font-family: sans-serif;  
}

.container {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
}

.checkbox input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}
.checkbox label {
    position: relative;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #7bbe72;
}
.checkbox label:after {
  content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #7bbe72;
    border-left: 2px solid #7bbe72;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 12px;
    left: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label::before {
    color: #7bbe72;
}

.checkbox input[type="checkbox"]:checked ~ label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox label {
    min-height: 34px;
    display: block;
    padding-left: 40px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    vertical-align: sub;
}
.checkbox label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0;
}

<div class="container"> 
  <div class="checkbox">
     <input type="checkbox" id="checkbox" name="" value="">
     <label for="checkbox"><span>Checkbox</span></label>
  </div>

  <div class="checkbox">
     <input type="checkbox" id="checkbox2" name="" value="">
     <label for="checkbox2"><span>Checkbox</span></label>
  </div>
</div>

Answer 2

Ich würde den Rat von SW4's Antwort . Nicht mehr: Volomike's Antwort ist allen Antworten hier weit überlegen (beachten Sie meinen Verbesserungsvorschlag im Kommentar zu der Antwort). Lesen Sie diese Antwort weiter, wenn Sie neugierig auf alternative Ansätze sind, die diese Antwort kommentiert.

---

Blenden Sie zunächst das Kontrollkästchen aus und überdecken Sie es mit einem benutzerdefinierten Bereich, indem Sie dieses HTML vorschlagen:

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

Das "wrap in"-Label ermöglicht das Anklicken des Textes, ohne dass eine Verknüpfung mit dem Attribut "for-id" erforderlich ist. Allerdings,

Verstecken Sie es nicht mit visibility: hidden o display: none

Es funktioniert durch Klicken oder Tippen, aber das ist eine lahme Art, Kontrollkästchen zu verwenden. Manche Leute verwenden immer noch viel effektivere Tab um den Fokus zu verschieben, Space zu aktivieren, und das Ausblenden mit dieser Methode deaktiviert sie. Wenn das Formular lang ist, spart man sich die Handgelenke und verwendet tabindex o accesskey Eigenschaften. Und wenn Sie das Verhalten der System-Kontrollkästchen beobachten, gibt es einen anständigen Schatten beim Hovern. Das gut gestylte Kontrollkästchen sollte diesem Verhalten folgen.

cobberboy's Antwort empfiehlt Font Awesome was in der Regel besser ist als Bitmap, da Schriftarten skalierbare Vektoren sind. Bei der Arbeit mit dem obigen HTML würde ich diese CSS-Regeln vorschlagen:

1. Kontrollkästchen ausblenden

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

   Ich verwende nur negative z-index da in meinem Beispiel die Skin des Kontrollkästchens groß genug ist, um es vollständig abzudecken. Ich empfehle nicht left: -999px da sie nicht in jedem Layout wiederverwendbar ist. Antwort von Bushan wagh bietet einen sicheren Weg, es zu verstecken und den Browser davon zu überzeugen, tabindex zu verwenden, und ist daher eine gute Alternative. Wie auch immer, beides ist 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 Kontrollkästchens

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

3. Checkbox-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;
    }

\00f096 ist Font Awesome's square-o Die Auffüllung wird angepasst, um eine gleichmäßige gepunktete Kontur beim Scharfstellen zu erhalten (siehe unten).

4. Kontrollkästchen aktivieren Skin hinzufügen

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

\00f046 ist Font Awesome's check-square-o die nicht die gleiche Breite hat wie square-o Das ist der Grund für die obige Breitenangabe.

5. Fokusumriss hinzufügen

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

   Safari bietet diese Funktion nicht (siehe Kommentar von @Jason Sankey), siehe diese Antwort für Safari-only CSS

6. Graue Farbe für deaktiviertes Kontrollkästchen festlegen

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

7. Hover-Schatten auf nicht deaktiviertes Kontrollkästchen setzen

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

---

Testen Sie es an JS-Fiedel

Fahren Sie mit der Maus über die Kontrollkästchen und verwenden Sie Tab y Shift + Tab zu bewegen und Space zum Umschalten.

Answer 3

El CSS Basic User Interface Modul Stufe 4 unterstützt dies (endlich) durch eine neue Lösung namens accent-color und es ist eigentlich ganz einfach, im Gegensatz zu so ziemlich jeder anderen Antwort hier:

input {
    accent-color: rebeccapurple;
}

<input type="checkbox" />

Legen Sie einfach eine beliebige CSS-Farbe (z. B. einen benannten Wert, einen Hex-Code usw.) als Wert von accent-color und sie wird angewendet.

Dies funktioniert derzeit in Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+) und Safari (v15.4+).

Hinweis: Edge, Chrome und Opera (und möglicherweise Safari; ich kann das nicht testen) unterstützen derzeit keine Alphakanalwerte über rgba() entweder (die RGB-Werte von rgba() funktionieren"; der Alphakanal wird vom Browser einfach ignoriert). Siehe MDN-Browser-Unterstützung für weitere Informationen.

Answer 4

Mit reinem CSS, nichts Ausgefallenes mit :before y :after keine Transformationen, können Sie die Standarddarstellung deaktivieren und dann mit einem Inline-Hintergrundbild wie im folgenden Beispiel gestalten. Dies funktioniert in Chrome, Firefox, Safari und jetzt auch 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>

Answer 5

Einfach zu implementierende und leicht anpassbare Lösung

Nach langem Suchen und Testen habe ich diese Lösung gefunden, die einfach zu implementieren und leichter anzupassen ist. Bei dieser Lösung :

1. Sie benötigen keine externen Bibliotheken und Dateien
2. Sie müssen nicht hinzufügen zusätzliches HTML auf Ihrer Seite
3. Sie müssen die Namen der Kontrollkästchen nicht ändern und id

Legen Sie einfach die fließende CSS am Anfang Ihrer Seite und alle Kontrollkästchen Stil wird wie folgt ändern:

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,
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,
input[type=checkbox]:checked::after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

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