So richten Sie Checkboxen und ihre Beschriftungen konsistent browserübergreifend aus

Lesezeit: 4 Minuten

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

Wie richten sich Leute rund um Stack Overflow vertikal aus? checkboxes und ihre labels konsequent Cross-Browser?

Immer wenn ich sie in Safari richtig ausrichte (normalerweise mit vertical-align: baseline auf der input), sind sie in Firefox und IE vollständig deaktiviert.

Beheben Sie es in Firefox, und Safari und IE sind unweigerlich durcheinander. Ich verschwende jedes Mal Zeit damit, wenn ich ein Formular codiere.

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, sodass Formularelemente relativ frei von Überschreibungen sind. Wir freuen uns auf alle Tipps oder Tricks, die Sie zu bieten haben!

  • Setzen Sie jedes Kontrollkästchen und jede Beschriftung in ein

  • -Element. Fügen Sie overflow:hidden zum
  • hinzu und schweben Sie das Label und das Kontrollkästchen nach links. Dann passen sie alle perfekt zusammen. Setzen Sie das Kontrollkästchen nicht offensichtlich in das Label-Element.

    – Band eins

    18. Januar 2014 um 18:37 Uhr

  • Ich habe es erreicht, indem ich verwendet habe height und line-height Attribute, werfen Sie einen Blick auf jsfiddle.net/wepw5o57/3

    – TheGr8_Nik

    9. Dezember 2014 um 13:41 Uhr

  • Manipulation mit position und top wird dieses Problem lösen Beispiel: jsfiddle.net/ynkjc22s

    – Professor08

    9. April 2016 um 12:59 Uhr


  • 2019. immer noch das gleiche Problem. Ich brauche noch ein paar Hacks, damit es funktioniert 🙁

    – Dieter

    6. April 2019 um 8:40 Uhr

  • @dieter siehe meine Antwort, ich habe erklärt, warum Hacks benötigt werden und welcher Ansatz nicht hacky ist: stackoverflow.com/a/56558431/3995261

    – Jakow L

    12. Juni 2019 um 10:31 Uhr

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

    Sie schweben alle nebeneinander auf derselben Zeile, aber der Nowrap bedeutet, dass der gesamte Beschriftungstext immer neben der Checkbox bleibt.

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

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

    Nun, wenn Sie einen sehr langen Beschriftungstext hatten erforderlich Um das Kontrollkästchen ohne Umbruch zu umbrechen, würden Sie für die Etikettenelemente eine Auffüllung und einen negativen Texteinzug verwenden:

    .checkboxes label {
      display: block;
      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><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
        <label><input type="checkbox"> <span>Label text y</span></label>
        <label><input type="checkbox"> <span>Label text z</span></label>
      </div>
    </form>

    • Danke! Die “Vertikal-Ausrichtung: Mitte” sowohl bei der Eingabe als auch bei der Spanne hat bei mir hervorragend funktioniert.

      – Wilhelm Groß

      12. August 2010 um 14:42 Uhr

    • Nur ein Hinweis für andere: Dies funktioniert nicht im IE6, da es das nicht unterstützt [type=checkbox] CSS-Targeting.

      – Ein Buntstift

      8. April 2009 um 0:18 Uhr

    Eine einfache Sache, die gut zu funktionieren scheint, ist das Anwenden einer Anpassung der vertikalen Position des Kontrollkästchens mit vertikaler Ausrichtung. Es wird immer noch von Browser zu Browser unterschiedlich sein, aber die Lösung ist unkompliziert.

    input {
        vertical-align: -2px;
    }
    

    Referenz

    Versuchen vertical-align: middle

    Auch Ihr Code scheint so zu sein, wie er sein sollte:

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

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

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

    916730cookie-checkSo richten Sie Checkboxen und ihre Beschriftungen konsistent browserübergreifend aus

    This website is using cookies to improve the user-friendliness. You agree by using the website further.

    Privacy policy