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

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

Der Trick besteht darin, die vertikale Ausrichtung nur in Tabellenzellen oder im Inline-Block zu verwenden, wenn das Label-Tag verwendet wird.

Answer 2

Jetzt, da Flexbox in allen modernen Browsern unterstützt wird, scheint mir so etwas ein einfacher Ansatz zu sein.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Hier ist die vollständige Demo der Vorabversion:

label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
input[type=radio], 
input[type=checkbox] {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Answer 3

Ich denke, das ist der einfachste Weg

input {
    position: relative;
    top: 1px;
}

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

Answer 4

Das funktioniert bei mir gut:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Answer 5

Ich mag die relative Positionierung nicht, weil sie dazu führt, dass ein Element über allem anderen auf seiner Ebene gerendert wird (bei einem komplexen Layout kann es sich über etwas erheben).

Ich habe entdeckt, dass vertical-align: sub lässt die Kontrollkästchen in Chrome, Firefox und Opera gut genug ausgerichtet aussehen. Ich kann Safari nicht überprüfen, da ich kein MacOS habe und der IE10 leicht abweicht, aber ich habe festgestellt, dass es für mich eine gute Lösung ist.

Eine andere Lösung könnte darin bestehen, ein spezifisches CSS für jeden Browser zu erstellen und es mit einer vertikalen Ausrichtung in %/Pixel/EMs abzustimmen: http://css-tricks.com/snippets/css/browser-specific-hacks/