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 gewählte Antwort mit mehr als 400 Bewertungen funktionierte bei mir in Chrome 28 OSX nicht, wahrscheinlich weil sie nicht in OSX getestet wurde oder weil sie in dem System funktionierte, das 2008 auf dem Markt war, als die Frage beantwortet wurde.

Die Zeiten haben sich geändert, und neue CSS3-Lösungen sind jetzt machbar. Meine Lösung verwendet Pseudoelemente zur Erstellung einer benutzerdefiniertes Kontrollkästchen . Die Bedingungen (Vor- oder Nachteile, wie auch immer Sie es sehen) sind also folgende:

• Funktioniert nur in modernen Browsern (FF3.6+, IE9+, Chrome, Safari)
• Verlassen Sie sich auf ein benutzerdefiniertes Kontrollkästchen, das in jedem Browser/Betriebssystem genau gleich dargestellt wird. Hier habe ich nur ein paar einfache Farben gewählt, aber Sie könnten jederzeit lineare Farbverläufe und so weiter hinzufügen, um dem Ganzen mehr Pfiff zu verleihen.
• Sie ist auf eine bestimmte Schriftart/Schriftgröße ausgerichtet, und wenn man diese ändert, ändert man einfach die Positionierung und Größe des Kontrollkästchens, damit es vertikal ausgerichtet erscheint. Bei korrekter Anpassung sollte das Endergebnis in allen Browsern/Betriebssystemen nahezu identisch sein.
• Keine vertikalen Ausrichtungseigenschaften, keine Floats

• In meinem Beispiel müssen Sie das mitgelieferte Markup verwenden. Es wird nicht funktionieren, wenn es wie die Frage strukturiert ist, aber das Layout wird im Wesentlichen gleich aussehen. Wenn Sie Dinge verschieben wollen, müssen Sie auch das zugehörige CSS verschieben

  div.checkbox { position: relative; font-family: Arial; font-size: 13px; } label { position: relative; padding-left: 16px; } label::before { content :""; display: inline-block; width: 10px; height: 10px; background-color: white; border: solid 1px #9C9C9C; position: absolute; top: 1px; left: 0px; } label::after { content:""; width: 8px; height: 8px; background-color: #666666; position: absolute; left: 2px; top: 3px; display: none; } input[type=checkbox] { visibility: hidden; position: absolute; } input[type=checkbox]:checked + label::after { display: block; } input[type=checkbox]:active + label::before { background-color: #DDDDDD; }

  <form> <div class="checkbox"> <input id="check_me" type=checkbox /> <label for="check_me">Label for checkbox</label> </div> </form>

Diese Lösung blendet das Kontrollkästchen aus und fügt dem Etikett Pseudoelemente hinzu und formatiert sie, um das sichtbare Ankreuzfeld zu erstellen. Da die Beschriftung an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld dennoch aktualisiert und der Wert mit dem Formular übermittelt.

Und falls es Sie interessiert, hier ist meine Meinung zu Radiobuttons: http://jsfiddle.net/DtKrV/2/

Ich hoffe, das ist für jemanden nützlich!

Answer 2

Wenn Sie ASP.NET-Webformulare müssen Sie sich keine Gedanken über DIVs und andere Elemente oder feste Größen machen. Wir können die <asp:CheckBoxList> Text durch Einstellung float:left für den Eingabetyp CheckboxList in CSS.

Bitte prüfen Sie den folgenden Beispielcode:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX-Code:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Answer 3

Ich hatte noch nie ein Problem damit, es so zu machen:

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

Answer 4

Mit einem Eingabekontrollkästchen, das in die Beschriftung eingeschlossen und nach links verschoben ist:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

Das hat bei mir funktioniert:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Achten Sie darauf, dass die Höhe des mit der Zeilenhöhe des identisch ist (Blocklevel).

Answer 5

Das folgende Beispiel bietet pixelgenaue Konsistenz in allen Browsern, sogar im IE9:

Der Ansatz ist sehr vernünftig, ja geradezu offensichtlich:

1. Erstellen Sie einen Eingang und eine Beschriftung.
2. Zeigen Sie sie als Block an, damit Sie sie nach Belieben verschieben können.
3. Setzen Sie die Höhe und die Zeilenhöhe auf denselben Wert, um sicherzustellen, dass sie zentriert und vertikal ausgerichtet sind.
4. Für em Messungen, um die Höhe der Elemente zu berechnen, muss der Browser die Höhe der Schriftart für diese Elemente kennen, und es darf nicht selbst in em Messungen festgelegt werden.

Daraus ergibt sich eine weltweit gültige allgemeine Regel:

input, label {display:block;float:left;height:1em;line-height:1em;}

Die Schriftgröße kann pro Formular, Feldsatz oder Element angepasst werden.

#myform input, #myform label {font-size:20px;}

Getestet in den aktuellen Browsern Chrome, Safari und Firefox auf Mac, Windows, Iphone und Android. Und IE9.

Diese Methode ist wahrscheinlich auf alle Eingabearten anwendbar, die nicht größer als eine Textzeile sind. Wenden Sie eine entsprechende Typregel an.