Frage So richten Sie Checkboxen und ihre Beschriftungen konsistent über Browser hinweg aus


Dies ist eines der kleinen CSS-Probleme, die mich ständig plagt. Wie richten sich die Leute in der Umgebung von Stack Overflow vertikal aus? checkboxes und ihre labels konsequent Cross-Browser? Immer wenn ich sie in Safari richtig ausrichtet (normalerweise mit vertical-align: baseline auf der input), sind sie komplett in Firefox und IE. Repariere es in Firefox, und Safari und IE sind unweigerlich durcheinander. Ich verschwende Zeit damit, jedes Mal wenn ich ein Formular code.

Hier ist der Standardcode, mit dem ich arbeite:

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

Normalerweise verwende ich Eric Meyers Reset, so dass Formularelemente relativ sauber sind. Ich freue mich auf alle Tipps oder Tricks, die Sie anbieten können!


1507


Ursprung


Antworten:


Nach über einer Stunde, in der ich verschiedene Markup-Stile optimiert, getestet und getestet habe, denke ich, dass ich eine vernünftige Lösung habe. Die Anforderungen für dieses spezielle Projekt waren:

  1. Eingaben müssen in einer eigenen Zeile stehen.
  2. Checkbox-Eingaben müssen in ähnlicher Weise (wenn nicht identisch) über alle Browser hinweg vertikal mit dem Etikettentext ausgerichtet sein.
  3. Wenn der Etikettentext umgebrochen wird, muss er eingerückt werden (also kein Umbruch unter dem Kontrollkästchen).

Bevor ich in irgendeine Erklärung komme, gebe ich dir einfach den Code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Hier ist das Arbeitsbeispiel in JSFidel.

In diesem Code wird davon ausgegangen, dass Sie einen Reset wie Eric Meyer verwenden, der die Eingabefarbmargen und das Padding des Formulars nicht außer Kraft setzt (daher werden Rand- und Padding-Resets im Eingabe-CSS zurückgesetzt). Offensichtlich werden Sie in einer Live-Umgebung wahrscheinlich Dinge verschachteln / übersteuern, um andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach halten.

Dinge zu beachten:

  • Das *overflow Deklaration ist ein Inline-IE-Hack (der Star-Property-Hack). Sowohl IE 6 als auch 7 werden es bemerken, Safari und Firefox werden es jedoch ignorieren. Ich denke, es könnte ein gültiges CSS sein, aber mit bedingten Kommentaren sind Sie immer noch besser dran; benutze es einfach zur Vereinfachung.
  • Soweit ich das beurteilen kann, das einzige vertical-align Aussage, die in allen Browsern konsistent war vertical-align: bottom. Das Einstellen und dann relatives Positionieren nach oben verhielt sich in Safari, Firefox und IE fast identisch mit nur ein oder zwei Pixeln der Diskrepanz.
  • Das Hauptproblem beim Arbeiten mit Alignment ist, dass IE eine Menge mysteriösen Raum um Eingabeelemente herumlegt. Es ist keine Polsterung oder Marge, und es ist verdammt hartnäckig. Legen Sie eine Breite und Höhe für das Kontrollkästchen und dann fest overflow: hidden Aus irgendeinem Grund schneidet es den zusätzlichen Platz ab und erlaubt es dem IE, sich sehr ähnlich wie Safari und Firefox zu verhalten.
  • Abhängig von Ihrer Textgröße müssen Sie die relative Positionierung, Breite, Höhe usw. anpassen, damit die Dinge richtig aussehen.

Hoffe das hilft jemand anderem! Ich habe diese spezielle Technik bei keinem anderen Projekt als dem, an dem ich heute Morgen gearbeitet habe, ausprobiert, also versuche es definitiv, wenn du etwas findest, das besser funktioniert.


914



Manchmal benötigt die vertikale Ausrichtung zwei Inline-Elemente (Span, Label, Eingabe usw.) nebeneinander, um ordnungsgemäß zu funktionieren. Die folgenden Kontrollkästchen sind in IE, Safari, FF und Chrome korrekt vertikal zentriert, auch wenn die Textgröße sehr klein oder groß ist.

Sie alle schwimmen nebeneinander auf der gleichen Linie, aber der Nowrap bedeutet, dass der gesamte Etikettentext immer neben der Checkbox bleibt.

Der Nachteil sind die zusätzlichen bedeutungslosen SPAN-Tags.

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Nun, wenn Sie einen sehr langen Etikettentext hätten erforderlich Um den Umbruch ohne Umbruch unter das Kontrollkästchen zu setzen, würden Sie den Beschriftungen Padding und negativen Texteinzug zuweisen:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


170



Abarbeiten von One Crayons LösungIch habe etwas, das für mich funktioniert und einfacher ist:

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] {
  bottom: 2px;
}
<label>
  <input type="checkbox">
  Label text
</label>

Rendert Pixel für Pixel das gleiche in Safari (wessen Baseline ich vertraue) und sowohl Firefox als auch IE7 als gut auschecken. Es funktioniert auch für verschiedene Label-Schriftgrößen, groß und klein. Nun, um IE's Baseline auf Selects und Inputs zu fixieren ...


155



Eine einfache Sache, die gut zu funktionieren scheint, besteht darin, die vertikale Position des Kontrollkästchens mit lotrecht auszurichten. Es wird immer noch zwischen Browsern variieren, aber die Lösung ist unkompliziert.

input {
    vertical-align: -2px;
}

Referenz


117



Versuchen vertical-align: middle

Auch der Code scheint so zu sein:

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


77



Versuchen Sie meine Lösung, ich habe es in IE 6, FF2 und Chrome versucht und es pixelweise in allen drei Browsern gerendert.

* {
  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>


36



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

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

Getestet heute in Chrome, Firefox, Opera, IE 7 und 8. Beispiel: Geige


24



Normalerweise verwende ich 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.


16



Ich habe meine Lösung nicht vollständig getestet, aber es scheint großartig zu funktionieren.

Mein HTML ist einfach:

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

Ich setze dann alle Checkboxen auf 24px für Höhe und Breite. Um den Text auszurichten, mache ich das Etikett line-height ebenfalls 24px und zuweisen vertical-align: top; so:

BEARBEITEN: Nach dem IE-Test habe ich hinzugefügt vertical-align: bottom; zur Eingabe und änderte das CSS des Labels. Sie können feststellen, dass Sie einen bedingten IE css-Fall benötigen, um das Auffüllen zu sortieren - aber der Text und die 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;
}

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

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12