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

Vielleicht machen einige Leute den gleichen Fehler wie ich? Nämlich... Ich hatte eine Breite für die Eingabefelder festgelegt, weil sie meist vom Typ "Text" waren, dann aber vergessen, diese Breite für Kontrollkästchen zu überschreiben - also versuchte mein Kontrollkästchen, viel überschüssige Breite einzunehmen, und so war es schwierig, ein Etikett daneben auszurichten.

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

Ermöglicht anklickbare Beschriftungen und eine korrekte Ausrichtung bereits im IE6 (unter Verwendung eines Klassenselektors) und in späteren Versionen von Firefox, Safari und Chrome

Answer 2

Einfache Lösung:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Getestet in Chrome und Firefox, IE9 +, Safari, iOS 9+

Answer 3

Ja, danke! Auch das hat mich schon immer verrückt gemacht.

In meinem speziellen Fall hat das für mich funktioniert:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Ich verwende die reset.css, die einige der Unterschiede erklären könnte, aber dies scheint für mich gut zu funktionieren.

Answer 4

label {
    display: inline-block;
    padding-right: 10px;
}
input[type=checkbox] {
    position: relative;
    top: 2px;
}

Answer 5

<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

Sie sollten Formular-Steuerelemente gruppiert in ihren eigenen fieldsets sowieso wrap, hier, es spielt die wrappa. set input/label do display:block, input float left, label float right, setzen Sie Ihre Breiten, Kontrolle Abstand mit linken/rechten Rändern, Align Label Text entsprechend.

also

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

Wahrscheinlich müssen Sie für browser- und medienübergreifende Lösungen auch Rahmen, Kontur und Zeilenhöhe für beide festlegen.