Konsistente Ausrichtung von Kontrollkästchen und deren Beschriftungen in verschiedenen Browsern

Question

Dies ist eines der kleineren CSS-Probleme, die mich ständig plagen.

Wie richten sich die Leute bei Stack Overflow vertikal aus? checkboxes und ihre labels durchgehend Cross-Browser ?

Wenn ich sie in Safari richtig ausrichte (normalerweise mit vertical-align: baseline über die input ), sind sie in Firefox und IE vollständig verschwunden.

Reparieren Sie es in Firefox, und Safari und IE sind unweigerlich durcheinander. Jedes Mal, wenn ich ein Formular programmiere, verschwende ich damit Zeit.

Hier ist der Standardcode, mit dem ich arbeite:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

Ich verwende in der Regel Eric Meyers Reset, so dass die Formularelemente relativ frei von Überschreibungen sind. Ich freue mich auf alle Tipps und Tricks, die Sie zu bieten haben!

Answer 1

Probieren Sie meine Lösung aus. Ich habe sie in IE 6, FF2 und Chrome ausprobiert, und sie wird in allen drei Browsern Pixel für Pixel dargestellt.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

Answer 2

Die einzige perfekt funktionierende Lösung für mich ist:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Heute in Chrome, Firefox, Opera, IE 7 und 8 getestet. Beispiel: Fiddle

Answer 3

Ich habe meine Lösung nicht vollständig getestet, aber sie scheint gut zu funktionieren.

Mein HTML ist einfach:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

Ich setze dann alle Kontrollkästchen auf 24px sowohl für die Höhe als auch für die Breite. Um den Text auszurichten, mache ich die Beschriftung der line-height también 24px und zuweisen vertical-align: top; etwa so:

EDIT: Nach dem IE-Test habe ich Folgendes hinzugefügt vertical-align: bottom; zur Eingabe hinzugefügt und das CSS der Beschriftung geändert. Möglicherweise müssen Sie eine bedingte IE-CSS-Fall zu sortieren Padding - aber der Text und Box sind inline.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Wenn jemand feststellt, dass dies nicht funktioniert, lassen Sie es mich bitte wissen. Hier ist es in Aktion (in Chrome und IE - Entschuldigung, da die Screenshots auf Retina und mit Parallels für IE gemacht wurden):

Answer 4

Normalerweise verwende ich die Zeilenhöhe, um die vertikale Position meines statischen Textes anzupassen:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Ich hoffe, das hilft.

Answer 5

Werfen wir schließlich einen Blick auf die Ursache des Problems

Die Kontrollkästchen werden mit Hilfe von Bildern gerendert (man kann über CSS benutzerdefinierte Bilder festlegen). Hier ist ein (nicht markiertes) Kontrollkästchen in FireFox, hervorgehoben mit dem DOM-Inspektor:

Und hier ist das gleiche ungestylte Kontrollkästchen in Chrome:

Sie können den Rand (orange) sehen; die Füllung ist nicht vorhanden (würde grün angezeigt). Was ist also dieser Pseudo-Rand rechts und unten am Kontrollkästchen? Dies sind Teile des Bildes, das für das Kontrollkästchen verwendet wird . Deshalb ist die Verwendung von nur vertical-align: middle reicht nicht wirklich aus, und das ist die Ursache für die browserübergreifenden Probleme.

Was können wir also dagegen tun?

Eine offensichtliche Möglichkeit ist - die Bilder zu ersetzen! Glücklicherweise kann man dies über CSS tun und diese durch externe Bilder, base64 (in-CSS) Bilder, in-CSS svg oder einfach Pseudo-Elemente ersetzen. Das ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, gestohlen aus diese Frage :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Vielleicht möchten Sie einige ausführlichere Artikel über dieses Styling lesen, wie die folgenden ici ; das würde den Rahmen dieser Antwort sprengen.

Ok, aber was ist mit der Lösung ohne benutzerdefinierte Bilder oder Pseudo-Elemente?

TL;DR: sieht so aus, als würde das nicht funktionieren, verwenden Sie stattdessen benutzerdefinierte Checkbox

Zunächst sei darauf hingewiesen, dass es keine konsistente Lösung gibt, wenn in anderen Browsern die Pseudoränder innerhalb des Kontrollkästchensymbols willkürlich sind. Um eine zu finden, müssen wir die Anatomie solcher Bilder in bestehenden Browsern untersuchen.

In welchen Browsern gibt es die Pseudoränder in Kontrollkästchen? Ich habe Chrome 75, Vivaldi 2.5 (Chromium-basiert), FireFox 54 (fragen Sie nicht, warum so veraltet), IE 11, Edge 42, Safari ?? (kurzzeitig ausgeliehen, habe vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi hat solche Pseudo-Ränder (ich vermute, alle Chromium-basierten Browsern als auch, wie Opera).

Wie groß sind diese Pseudomargen? Um dies herauszufinden, kann man ein gezoomtes Kontrollkästchen verwenden:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mein Ergebnis ist ~7% der Breite/Höhe und somit 0,9-1,0px in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte von zoom für das Kontrollkästchen. In meinen Tests sowohl in Chrome als auch in Vivaldi ist die relative Größe des Pseudorands sehr unterschiedlich bei zoom Werte 10, 20 und bei den Werten 11-19 (??):

scale scheint konsistenter zu sein:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

also sind wahrscheinlich ~14% und 2px die richtigen Werte.

Da wir nun die Größe des Pseudorandes kennen (?), ist dies nicht ausreichend. Sind die Größen der Checkbox-Symbole in allen Browsern gleich? Leider zeigt der DOM-Inspektor folgendes für ungestylte Kontrollkästchen:

• FireFox: 13.3px
• Auf Chrombasis: 12.8px für die ganze Sache, also 12,8 (100% - 14%) = 11px für das, was visuell als Ankreuzfeld wahrgenommen wird
• IE 11, Edge: 13px
• Safari: k.A. (diese sollten auf demselben Bildschirm verglichen werden, glaube ich)

Bevor wir nun Lösungen oder Tricks erörtern, sollten wir uns fragen: Was ist ein richtig Ausrichtung? Was versuchen wir zu erreichen? Bis zu einem gewissen Punkt ist es eine Frage des Geschmacks, aber im Grunde genommen fallen mir die folgenden "schönen" Aspekte der Ausrichtung ein:

Text und Kontrollkästchen auf derselben Grundlinie (ich passe die Größe des Kontrollkästchens hier absichtlich nicht an):

oder dieselbe mittlere Zeile in Form von Kleinbuchstaben haben:

oder dieselbe mittlere Zeile in Großbuchstaben (bei unterschiedlichen Schriftgrößen ist der Unterschied leichter zu erkennen):

und wir müssen auch entscheiden, ob die Größe des Kontrollkästchens der Höhe eines Kleinbuchstabens, eines Großbuchstabens oder etwas anderem (größer, kleiner oder zwischen Klein- und Großbuchstaben) entsprechen soll.

Für diese Diskussion nennen wir eine Ausrichtung schön, wenn das Kontrollkästchen auf der gleichen Grundlinie wie der Text steht und die Größe eines Großbuchstabens hat (eine höchst fragwürdige Wahl):

Welche Instrumente haben wir nun zur Verfügung:

1. Größe des Kontrollkästchens anpassen
2. Chromium mit seinem pseudo-umrandeten Kontrollkästchen erkennen und bestimmte Stile festlegen
3. Vertikale Ausrichtung von Kontrollkästchen und Etiketten anpassen

?

1. Bezüglich der Anpassung der Größe von Kontrollkästchen : Es gibt width , height , size , zoom , scale (Habe ich etwas verpasst?). zoom y scale erlauben es nicht, die absolute Größe festzulegen, so dass sie nur bei der Anpassung an die Textgröße helfen können, nicht aber bei der Festlegung der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben). size funktioniert nicht mit Chrome (funktionierte es mit dem alten IE? ist sowieso nicht so interessant). width y height funktioniert in Chrome und anderen Browsern, so dass wir eine gemeinsame Größe festlegen können, aber auch hier gilt, dass in Chrome die Größe des gesamten Bildes festgelegt wird, nicht die des Kontrollkästchens selbst. Hinweis: Es ist minimum(width, height), das die Größe eines Kontrollkästchens definiert (wenn width != height, wird der Bereich außerhalb des Kontrollkästchens zum "Pseudo-Rand" hinzugefügt).

   Leider sind die Pseudoränder im Chrome-Kontrollkästchen nicht für alle Breiten und Höhen auf Null gesetzt, soweit ich sehen kann.

2. Ich fürchte, es gibt keine zuverlässigen reines CSS-Verfahren in diesen Tagen.

3. Betrachten wir die vertikale Ausrichtung. vertical-align kann keine konsistenten Ergebnisse liefern, wenn sie auf middle o baseline Wegen des Pseudorandes von Chrome besteht die einzige Möglichkeit, das gleiche "Koordinatensystem" für alle Browser zu erhalten, darin, die Beschriftung und die Eingaben an der top :

   

   (auf dem Bild: vertical-align: oben, unten und unten ohne box-shadow)

Welches Ergebnis haben wir also?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

Das obige Snippet funktioniert mit Chrome (Chromium-basierten Browsern), aber andere Browser erfordern eine kleinere Größe des Kontrollkästchens. Es scheint unmöglich zu sein, sowohl die Größe als auch die vertikale Ausrichtung so anzupassen, dass die Eigenart von Chromium in Bezug auf Checkbox-Bilder umgangen wird. Mein abschließender Vorschlag lautet: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - so vermeiden Sie Frustration :)