Wie richten Checkboxen und deren Bezeichnungen konsequent cross-Browser

Dies ist einer der kleinere CSS-Probleme, die plagen mich ständig. Wie tun Leute, um Stack-Überlauf vertikal ausrichten checkboxes und Ihre labels konsequent cross-browser -? Wenn ich so ausrichten, dass Sie richtig in Safari (meist mit vertical-align: baseline auf die input), sind Sie völlig aus in Firefox und IE. Fixieren Sie es in Firefox, Safari und IE sind unweigerlich Durcheinander. Ich Verschwendung Zeit auf diese jedes mal, wenn ich code in einem Formular.

Hier ist die standard-code, den ich mit der Arbeit:

HTML:

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

Normalerweise verwende ich Eric Meyer ' s reset, so bilden die Elemente sind relativ sauber, ignoriert. Freuen uns auf Tipps oder tricks, die Sie zu bieten haben!

Setzen Sie jede checkbox und label innerhalb eines <li> - element. Hinzufügen von overflow:hidden auf das <li> und float das label und die checkbox Links. Dann sind Sie alle richten völlig in Ordnung. Nicht setzen Sie die checkbox in label-Elementen offensichtlich.
Ich habe acieved es mit height und line-height Attribute, geben einen Blick auf jsfiddle.net/wepw5o57/3
Manipulation mit position und top wird dieses problem lösen Beispiel: jsfiddle.net/ynkjc22s
2019. immer noch das gleiche Problem. müssen noch einige hacks, um es zu bekommen Arbeit 🙁
siehe meine Antwort, ich habe erklärt, warum hacks nötig sind und was Ansatz ist nicht hacky: stackoverflow.com/a/56558431/3995261

InformationsquelleAutor |

966

Nach über einer Stunde tüfteln, testen und versuchen, verschiedene Arten von markup, ich glaube, ich kann eine anständige Lösung. Die Anforderungen für dieses Projekt waren:
1. Eingänge müssen auf Ihre eigene Linie.
2. Checkbox Eingänge müssen vertikal ausgerichtet mit den label-text ähnlich (wenn nicht identisch) in allen Browsern.
3. Wenn das label text wird umbrochen, es muss eingerückt sein (also kein Umbruch nach unten unterhalb des Kontrollkästchens).
Bevor ich in irgendeine Erklärung, ich werde nur geben Sie den code:

CSS:
```
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;
}
```
HTML:
```
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>
```
Hier ist das Beispiel in JSFiddle.

Diesem code wird davon ausgegangen, dass Sie ein zurücksetzen, wie Eric Meyers, der nicht überschreiben form-input-Margen und Polsterung (daher setzen margin und padding setzt in der input-CSS). Offensichtlich in einer live-Umgebung werden Sie wahrscheinlich nisten/überschreiben von Sachen, auch Unterstützung für andere input-Elemente, aber ich wollte die Dinge einfach halten.

Dinge zu beachten:
- Die *overflow Erklärung ist ein inline-IE-hack (die Sterne-Anwesen hack). Sowohl IE 6 und 7 wird es bemerken, aber Safari und Firefox korrekt zu ignorieren. Ich denke, es könnte sein, valid CSS, aber du bist noch besser dran mit conditional comments; nur verwendet es für Einfachheit.
- Als am besten ich kann sagen, die nur vertical-align Aussage war konsequent in allen Browsern war vertical-align: bottom. Diese Einstellung und dann relativ-Positionierung nach oben verhielten sich fast identisch in Safari, Firefox und IE mit nur ein oder zwei pixel der Diskrepanz.
- Das größte problem in der Arbeit mit der Ausrichtung ist, dass der IE-sticks eine Reihe von mysteriösen Raum um input-Elemente. Es ist nicht padding oder margin, und es ist verdammt hartnäckig. Einstellung einer Breite und Höhe auf die checkbox und dann overflow: hidden aus irgendeinem Grund schneidet die zusätzlichen Raum und ermöglicht IE die Positionierung und handeln sehr ähnlich wie Safari und Firefox.
- Je nach text sizing, Sie werden ohne Zweifel anpassen müssen, um die relative Positionierung, Breite, Höhe, und so weiter, um die Dinge nach rechts.
Hoffe, dies hilft jemand anderes! Ich habe nicht versucht, diese spezielle Technik auf Projekte, die andere als die, die ich arbeitete an diesem morgen, also definitiv Rohr, wenn Sie etwas finden, die funktioniert mehr konsequent.
- Hinweis. Sie wahrscheinlich sollte setzen Sie eine "for" - Attribut auf dem Etikett, um sicherzustellen, es funktioniert für alle Browser und text-Leser. ( Mir ist klar das du wahrscheinlich verlassen Sie es aus für Einfachheit)
- Meine Güte, ich hatte nicht realisiert, wie viele Menschen unwissend von dieser: wenn Sie das einwickeln der Eingang in das label-tag, der "für" - Attribut ist überflüssig. Fühlen Sie sich frei, für sich selbst zu sehen: w3.org/TR/html401/interact/forms.html#h-17.9.1
- Ich bin nicht einverstanden mit dem Vorschlag über die Verwendung von conditional comments. Halten Sie die *foobar CSS-hack. Das funktioniert gut, wird von frameworks wie YUI, und ermöglicht es Ihnen, halten zusammen, was zusammen gehört.
- Ich habe gesehen, Probleme mit dem IE beim umwickeln Sie die Eingabe mit dem label. Wie, klicken Sie auf entweder die Bezeichnung oder den Eingang nicht die Ursache cursor. ymmv...
- sind Sie in der Lage zu reproduzieren die IE-Fehler, oder ist es anekdotische? Ich würde gerne vermeiden, die Besondere problem. 🙂
- Sie wechseln konnte, alle diejenigen, die px-Werte für mehr-nützliche em-Werte und haben deutlich weniger Schmerzen, mit Schriftgrößen.
- Da keines der pixel-Werte sind aus der Ferne zu beeinflussen font sizing, ich kann nicht erkennen, warum Sie besser als ems. Es sei denn, das Kontrollkästchen Größen, wenn font-size erhöht, Pixel sind besser für diese Art von Positionierung-code.
- die Eigenschaften position:relative und Werte kleiner als null ist, scheint mir zu Komplex für den alltäglichen Gebrauch - ich bevorzuge die Variante stackoverflow.com/questions/306252/... mit meiner Ergänzung im Kommentar
- Wachsmalstift: Dies ist einer jener 4 Uhr morgens, an den Haaren ziehen Lebensretter. Es getan, so viele Male zuvor, hatte nie Glück bei der Suche dieser Lösung.
- Es gibt ein großes Problem mit diesem! Da das label ist ein block-level-element können Sie jetzt klicken Sie rechts neben den label-text und trigger radio/checkbox ändert.
- Das problem mit der wraping die checkbox innerhalb des label ist, dass Sie können nicht auf diese Regel: input[type=checkbox]:checked+label
- Wickeln Sie das Kontrollkästchen in der label, ohne das " for " scheint nicht zu funktionieren bei mir im IE6 (unter IETester), alle anderen Browser scheinen in Ordnung zu sein. Repro: jsfiddle.net/2Cz2y/7
- Hat nicht gut funktioniert auf Android (2.3), dessen browser hat größere Checkboxen als andere Browser, also die Einrückung der 2. Zeile war aus.
- Wachsmalstift: weglassen for im label wird nicht in IE6
- mit benachbarten sibling selector (+) funktioniert nicht im IE lt 9 afaik, also ist es ein Kompromiss so oder so. Js Lösungen sind, erschaudern-würdig, wenn es sich um Reine css-Lösungen gibt, aber für diesen einen js kann der beste Weg sein.
- Nein, das ist nicht wahr, es funktioniert auch im IE7 (reference.sitepoint.com/css/adjacentsiblingselector)
- Wachsmalstift: -1 auf die unwissenden Kommentar. Atømix wies darauf hin, Unterstützung für alle Browser, aus dem gleichen Grund, warum Sie die Stern-Eigenschaft hack.
- text-Leser verwirrt werden kann, durch Eingabe in Bezeichnung: "Bis der browser implementors fix Ihre Unterstützung der Barrierefreiheit, wenn Sie wollen, kontrolliert zu werden, verständlich BEI [assistive technology] Benutzer-label-Steuerelemente verwenden und id. Verwenden Sie nicht die Kontrolle innerhalb der label-Methode. Verwenden Sie nicht eine Kombination von den 2 Methoden." von: blog.paciellogroup.com/2011/07/...
- Versucht diese in Chrome 28, Mac OSX, und die checkbox ist sichtbar geringer als der text
- als der dec 7, 2013, Checkboxen korrekt ausgerichtet, auf allen Browsern, die keine hacks, bin ich Irre?
- Vielleicht sind andere Dinge/styles auf meiner Seite verursacht einen Konflikt, aber ich fand, dass es für den IE7 musste ich die Eigenschaft vertical-align:baseline statt unten.
- top: -4px; *top: -2px; tatsächlich funktionierte für mich am besten.
- Fantastische Lösung! Ich habe gerade padding-left und text-indent, um 16px anstatt 15px und es funktioniert perfekt.
- Beachten Sie, dass dies scheint nicht zu funktionieren in den neuesten Versionen von Chrome (ich bin mit v36). i.imgur.com/y9Ffxsh.png Edit: noch Firefox (v31)
- Ist die Platzierung der Eingabe innerhalb des label-ADA-konform / zugänglich?
- Text ist zu hoch auf Chrome 58 (Windows).
- Ich habe Checkboxen, die durch jquery und egal was ich Tat, der text und die checkbox immer in getrennte Zeilen ein. Diese Feste, es 100%. Ich danke Ihnen so sehr. Ich benutze Firefox. Hoffentlich wird es erscheinen die gleichen auf anderen Browsern, die ich werden es früh genug erfahren.
- Sieht nicht gut aus, viele Konstanten, die negativen Werte... Diese Antwort stackoverflow.com/a/494922/4548520 sieht für mich viel besser (das erste Beispiel)
- Text ist höher als der checkbox auf der Kante, Firefox, Chrome (aktuelle Versionen zum Zeitpunkt des Schreibens) auf Windows 10, atleast Sie sind alle in etwa der gleichen position in jedem browser, der braucht nur Feintuning.
InformationsquelleAutor
189

Manchmal vertical-align braucht zwei inline (span, label, input, etc...) Elemente nebeneinander, um richtig zu arbeiten. Die folgenden Einstellungen sind korrekt vertikal zentriert im IE, Safari, FF, und Chrome, auch wenn der text Größe ist sehr klein oder groß.

Sie alle schweben nebeneinander in der gleichen Zeile, aber die nowrap bedeutet, dass das ganze label text bleibt immer neben dem Kontrollkästchen.

Der Nachteil ist die zusätzliche bedeutungslos SPAN-tags.

CSS:
```
.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
```
HTML:
```
<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 hatte eine sehr lange label-text, der benötigt zu wickeln, ohne Verpackung unter die Kontrollkästchen, die Sie verwenden würden, Polsterung und negativen text-indent auf die label-Elemente:

CSS:
```
.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
```
HTML:
```
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <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 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>
```
- Danke! Die "vertical-align: middle" sowohl auf der Eingangs-und der span funktionierte großartig für mich.
- Das funktioniert gut mit bootstrap 3.0 css.
- display: block; float: left; scheint überflüssig zu sein
- so ist es nicht in Ordnung weglassen for Attribut, wenn mit dem span? (wie Eine Buntstift-kommentiert akzeptierte Antwort) w3.org/TR/html401/interact/forms.html#h-17.9.1
- Sie müssen nicht verwenden einer for-Attribut, wenn Sie die Eingabe innerhalb des label. Es funktioniert, ohne es.
- Dies sollte die akzeptierte Antwort meiner Meinung nach. Es ist keine Feinabstimmung erforderlich.
- Genial und bestätigt noch funktioniert auf Chrome 58 (Windows) (im Gegensatz zu den derzeitigen top-Antwort).
- Sie brauchen noch nicht einmal den span. Es ist genug, um eine vertical-align: middle auf das Kontrollkästchen.
- vertical-align: middle; auf label und checkbox funktionierte out of the box für mich. Nichts anderes benötigt
- Ich habe bearbeitet die Antwort für die Beseitigung der redundanten float: left bisschen wie @PHPst vorgeschlagen hat. Wenn Sie nicht ein einziges problem, bitte kommentieren. Die display bits sind nur hier, um zu richten die 3 Beispiele in einer Zeile/Spalte
InformationsquelleAutor
174

Arbeiten aus der Ein Crayon Lösung, ich habe etwas, das funktioniert für mich und ist einfacher:

CSS:
```
.font2 {font-family:Arial; font-size:32px} /* Sample font */

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

input[type=radio] { 
  bottom: 2px; 
} 
```
HTML:
```
<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>
```
Macht pixel-für-pixel das gleiche in Safari (dessen Grundlinie vertraue ich) und Firefox und IE7 check-out so gut. Es funktioniert auch für verschiedene label schriftart, Größen, groß und klein. Nun, für die Festsetzung IE Grundlinie auf wählt und Eingänge...

Update: (Third-Party-Edit)

Den richtigen bottom position hängt davon ab, font-family und font-size! Ich fand mit bottom: .08em; für checkbox & radio-Elemente ist eine gute Allgemeine Wert. Getestet habe ich es in Chrome/Firefox/IE11 in windows mit Arial & Calibri Schriftarten über mehrere kleine/mittlere/große Schrift-Größen.

CSS:
```
.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}
```
HTML:
```
<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>
```
- Nur ein Hinweis für die anderen: dies funktioniert nicht im IE6, weil es nicht die Unterstützung der [type=checkbox] CSS-targeting.
- Sie können fügen Sie einfach eine Klasse anstelle der Verwendung von nicht unterstützten Selektoren, wenn IE6-support erforderlich ist.
- Diese funktionierte für mich. Doch statt der Einstellung "position: relative; bottom: 1px", kann man mit "margin: 0 0 1px 0", um das gleiche Ergebnis zu erzielen.
InformationsquelleAutor
132

Eine einfache Sache, die scheint, gut zu arbeiten, ist die Anwendung einer zum einstellen der vertikalen position der checkbox mit vertical-align. Es wird immer noch variieren zwischen den Browsern, aber die Lösung ist unkompliziert.
```
input {
    vertical-align: -2px;
}
```
"Referenz
- Das war die kleinste änderung bei allen anderen, die für mich funktioniert in den neuesten Versionen von Browsern.
- Das funktioniert sogar besser als mit vertical-align und position: relative denn es arbeitet auch im IE9 richtig 🙂
- aber es hängt an font-size. für die große Schrift-Größen, angepasst werden muss, um zu höheren negativen Werten, z.B.: vertical-align: -6px;
- vermutlich kann diese Arbeit besser mit verschiedenen Schriftarten, wenn dies in der em
InformationsquelleAutor
87

versuchen vertical-align: middle

auch dein code scheint, wie es sein sollte:

HTML:
```
<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>
```
- <label for="blah"> ist nur notwendig, wenn Sie sich mit etwas, wo es nicht sinnvoll ist, für das label zu wickeln (wie eine textbox aus; ich werde in der Regel verwenden <label for="blah">Foo</label><input id="blah" type="text" /> in diesem Beispiel). Mit den Checkboxen finde ich es weniger markup, um wickeln Sie es.
- Nicht ganz richtig: Die Label-für die Benutzern erlauben, um die Beschriftung klicken, um das Kontrollkästchen neben einfachen Klick auf die checkbox selbst. Es ist sehr nützlich für das binden der beiden Elemente zusammen.
- Wenn eine Eingabe verschachtelten innen ein Etikett, klicken Sie dann auf das Etikett mit aktivieren/geben Sie den Fokus auf das input das Attribut ist ausschließlich für den Fall, wenn die Eingabe nicht verschachtelt.
- Das ist wahr, Ein Wachsmalstift, aber es ist immer noch eine gute Praxis, verwenden Sie das Attribut "for", oder haben Sie Probleme mit einigen Browsern, die das nicht erkennen, diese syntax räusper, DH.
- wenn Sie nicht möchten, dass Ihre checkbox eine ID haben, dann müssen Sie wickeln Sie die checkbox innerhalb des label
InformationsquelleAutor
36

Versuchen meine Lösung, ich habe versucht, es im IE 6, FF2 und Chrome und es macht pixel für pixel in allen drei Browsern.

CSS:
```
* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
```
HTML:
```
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>
```
- Interessant; ich mag die Idee der schwimmenden beide Elemente; das aus fixiert die Umhüllung Problem. Ich bin verbunden zum wickeln-Eingang, mit Beschriftung, aber das code ist ein heck von viel sauberer als die Lösung kam ich an.
- in diesem Beispiel wurde die checkbox input und label werden sollte, haben auch die Eigenschaft display: block und in einem solchen Fall werden Sie behandelt wie normale DIV ' s, die ausgerichtet werden kann leicht
- dieser hat ein problem, was passiert, wenn das label nicht passen in den verfügbaren Platz? das label und die checkbox getrennt sind (das Feld ist oben rechts, und die Bezeichnung unten Links). Wenn Sie wickeln die checkbox innerhalb Ihres Etiketts Sie haben dieses problem nicht.
- Es hat nicht funktioniert, um die pixel, aber es war anständig genug, um die Dinge besser Aussehen, auf der 3 großen Browser. Ich nehme an, hätte ich eine weitere Stunde verbracht, um zu sehen, dass es besser funktionieren würde...
InformationsquelleAutor
24

Nur perfekt funktionierende Lösung für mich ist:
```
input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}
```
Heute getestet in Chrome, Firefox, Opera, IE 7 und 8. Beispiel: Fiddle
- Es funktioniert nicht in Chrome v43
- getestet in Chrome und Safari heute und arbeiten
InformationsquelleAutor

Normalerweise verwende ich line-height, damit Sie die vertikale position meines statische text:

CSS:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

HTML:

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

Hoffe, das hilft.

Die einzige, die arbeitete für mich, thx

Lassen Sie uns abschließend einen Blick auf die Quelle des Problems

Also, was können wir dagegen tun?

Ok, noch was zu no-custom-Bilder-oder-pseudo-Elemente Lösung?