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

Die Höhe und Breite des Kontrollkästchens hart kodieren, die Auffüllung entfernen und die Höhe plus vertikale Ränder gleich der Zeilenhöhe des Etiketts machen. Wenn der Beschriftungstext inline ist, lassen Sie das Ankreuzfeld schweben. Firefox, Chrome und IE7+ zeigen das folgende Beispiel identisch an: http://www.kornea.com/css-checkbox-align

Answer 2

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 3

Einfach verwenden vertical-align: sub als pokrishka bereits vorgeschlagen.

Fiddle

HTML-Code:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS-Code:

.checkboxes input {
    vertical-align: sub;
}

Answer 4

Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache seine "Beschriftung" dann zu einem separaten Element. Es ist mühsam, aber es gibt so viele Unterschiede zwischen den Browsern, wie Kontrollkästchen und ihre Beschriftungen angezeigt werden (wie Sie bemerkt haben), dass dies der einzige Weg ist, wie ich annähernd kontrollieren kann, wie alles aussieht.

Ich tue dies auch bei der Entwicklung von Winforms, und zwar aus demselben Grund. Ich denke, das grundlegende Problem mit dem Kontrollkästchen-Steuerelement ist, dass es sich eigentlich um zwei verschiedene Steuerelemente handelt: das Kästchen und das Etikett. Wenn man ein Ankreuzfeld verwendet, überlässt man es den Implementierern des Steuerelements zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie machen es immer falsch, wobei falsch = nicht das ist, was man will).

Ich hoffe wirklich, dass jemand eine bessere Antwort auf Ihre Frage hat.

Answer 5

Ich weiß, dass diese Frage schon oft beantwortet wurde, aber ich habe das Gefühl, dass ich eine viel elegantere Lösung habe als die, die bereits angeboten wurde. Und nicht nur 1 elegante Lösung, sondern 2 separate Lösungen, um Ihre Fantasie zu kitzeln. Mit dieser sagte, alles, was Sie wissen und sehen müssen, sind in 2 JS Fiddle, mit Kommentaren enthalten.

---

Lösung Nr. 1 beruht auf der systemeigenen "Checkbox" des jeweiligen Browsers, allerdings mit einer Besonderheit... Seine in einem div enthalten, die leichter zu positionieren Cross-Browser ist, mit einem Overflow: versteckt, um den Überschuss eines 1px gestreckt Checkbox zu hacken (dies ist, so dass Sie nicht sehen, die hässlichen Grenzen von FF)

Einfaches HTML: (folgen Sie dem Link, um das CSS mit Kommentaren zu überprüfen, der Code-Block ist für Stackoverflow) http://jsfiddle.net/KQghJ/

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

---

Lösung Nr. 2 verwendet den "Checkbox Toggle Hack", um den CSS-Zustand eines DIV umzuschalten, das korrekt im Browser positioniert und mit einem einfachen Sprite für die nicht angekreuzten und angekreuzten Zustände der Checkbox eingerichtet wurde. Alles, was nötig ist, ist die Anpassung der Hintergrundposition mit dem besagten Checkbox Toggle Hack. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Radios haben und garantieren können, dass sie in allen Browsern gleich aussehen.

Einfaches HTML: (folgen Sie dem Link, um das CSS mit Kommentaren zu überprüfen, der Code-Block ist für StackOverflow) http://jsfiddle.net/Sx5M2/

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

---

Wenn jemand mit diesen Methoden nicht einverstanden ist, hinterlasst mir bitte einen Kommentar, ich würde gerne ein Feedback dazu hören, warum andere nicht auf diese Lösungen gestoßen sind, oder wenn sie es sind, warum ich hier keine Antworten dazu sehe? Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es schön, das auch zu sehen, aber diese wurden in den neuesten Browsern getestet und basieren auf HTML / CSS-Methoden, die ziemlich alt sind, und universell, soweit ich gesehen habe.