So richten Sie Kontrollkästchen und ihre Beschriftungen konsistent zwischen Browsern aus

1733

Dies ist eines der kleineren CSS-Probleme, die mich ständig plagen. Wie richten sich die Leute rund um den Stapelüberlauf vertikal aus checkboxesund wie labelskonsistent ist der Browser ? Immer wenn ich sie in Safari richtig ausrichte (normalerweise vertical-align: baselineauf dem input), sind sie in Firefox und IE vollständig deaktiviert. Beheben Sie das Problem 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. Ich freue mich auf alle Tipps oder Tricks, die Sie zu bieten haben!

Ein Wachsmalstift
quelle
7
Setzen Sie jedes Kontrollkästchen und jede Beschriftung in ein <li> -Element. Überlauf hinzufügen: zum <li> versteckt und das Etikett und das Kontrollkästchen links schweben lassen. Dann richten sie sich alle perfekt aus. Setzen Sie das Kontrollkästchen nicht offensichtlich in das Beschriftungselement.
Band eins
5
Ich habe es mit heightund line-heightAttributen erreicht, werfen Sie einen Blick auf jsfiddle.net/wepw5o57/3
TheGr8_Nik
Manipulation mit positionund topwird dieses Problem lösen Beispiel: jsfiddle.net/ynkjc22s
Profesor08
2019. immer noch das gleiche Problem. brauche noch ein paar Hacks, damit es funktioniert :(
dieter
@dieter siehe meine Antwort, ich habe erklärt, warum Hacks benötigt werden und welcher Ansatz nicht hacky ist: stackoverflow.com/a/56558431/3995261
YakovL

Antworten:

1010

Nach über einer Stunde Optimieren, Testen und Ausprobieren verschiedener Markup-Stile denke ich, dass ich möglicherweise eine anständige Lösung habe. Die Anforderungen für dieses spezielle Projekt waren:

  1. Die Eingaben müssen in einer eigenen Zeile erfolgen.
  2. Checkbox-Eingaben müssen in allen Browsern ähnlich (wenn nicht identisch) vertikal am Beschriftungstext ausgerichtet sein.
  3. Wenn der Beschriftungstext umbrochen wird, muss er eingerückt werden (also kein Umbruch unter das Kontrollkästchen).

Bevor ich auf eine Erklärung eingehe, gebe ich Ihnen nur 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 JSFiddle .

In diesem Code wird davon ausgegangen, dass Sie einen Reset wie den von Eric Meyer verwenden, der die Eingaberänder und das Auffüllen von Formularen nicht überschreibt (daher werden das Zurücksetzen von Rändern und Auffüllungen in das Eingabe-CSS eingefügt). Natürlich werden Sie in einer Live-Umgebung wahrscheinlich Dinge verschachteln / überschreiben, um andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach halten.

Dinge zu beachten:

  • Die *overflowDeklaration ist ein Inline-IE-Hack (der Star-Property-Hack). Sowohl IE 6 als auch IE werden es bemerken, aber Safari und Firefox werden es ordnungsgemäß ignorieren. Ich denke, es könnte gültiges CSS sein, aber mit bedingten Kommentaren sind Sie immer noch besser dran. Ich habe es nur der Einfachheit halber benutzt.
  • Wie man am besten kann ich nur sagen, vertical-alignAussage , die in allen Browsern konsistent war war vertical-align: bottom. Wenn Sie dies einstellen und dann relativ nach oben positionieren, verhält es sich in Safari, Firefox und IE fast identisch mit nur ein oder zwei Pixeln Diskrepanz.
  • Das Hauptproblem bei der Arbeit mit der Ausrichtung besteht darin, dass der IE eine Menge mysteriöser Leerzeichen um die Eingabeelemente klebt. Es ist nicht Polsterung oder Rand, und es ist verdammt hartnäckig. Wenn Sie eine Breite und Höhe für das Kontrollkästchen festlegen und dann overflow: hiddenaus irgendeinem Grund den zusätzlichen Platz einschränken, kann die Positionierung des IE sehr ähnlich wie bei Safari und Firefox erfolgen.
  • Abhängig von Ihrer Textgröße müssen Sie zweifellos die relative Position, Breite, Höhe usw. anpassen, damit alles richtig aussieht.

Hoffe das hilft jemand anderem! Ich habe diese spezielle Technik bei keinem anderen Projekt als dem, an dem ich heute Morgen gearbeitet habe, ausprobiert. Wenn Sie also etwas finden, das konsistenter funktioniert, melden Sie sich auf jeden Fall.

Ein Wachsmalstift
quelle
8
Hinweis. Sie sollten Ihrem Etikett wahrscheinlich ein "for" -Attribut hinzufügen, um sicherzustellen, dass es für alle Browser und Textleser funktioniert. (Mir ist klar, dass Sie es wahrscheinlich der Einfachheit halber weggelassen haben)
Armstrongest
306
Meine Güte, ich hatte nicht bemerkt, wie viele Leute dies nicht wussten: Wenn Sie die Eingabe in das Label-Tag einbinden, ist das Attribut "for" nicht erforderlich. Überzeugen Sie sich
One Crayon
10
Ich bin mit dem Vorschlag, bedingte Kommentare zu verwenden, nicht einverstanden. Behalten Sie den * foobar CSS-Hack bei. Das funktioniert gut, wird von Frameworks wie YUI verwendet und ermöglicht es Ihnen, zusammenzuhalten, was zusammen gehört.
Ebruchez
50
Versucht, dies ist in Chrome 28, Mac OSX, und das Kontrollkästchen ist sichtbar niedriger als der Text
MusikAnimal
9
Beachten Sie, dass dies in den neuesten Versionen von Chrome (ich verwende v36) anscheinend nicht funktioniert. i.imgur.com/y9Ffxsh.png Bearbeiten: noch Firefox (v31)
Hans
214

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

Sie schweben alle in derselben Zeile nebeneinander, aber der Nowrap bedeutet, dass der gesamte Beschriftungstext immer neben dem Kontrollkästchen bleibt.

Der Nachteil sind die besonders 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 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 Beschriftungstext haben , die benötigte ohne Verpackung unter dem Kontrollkästchen wickeln, dann würden Sie Polsterung und negative Texteinrückung auf den Kennzeichnungselementen 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 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>

Nathan Bowers
quelle
19
Vielen Dank! Die "vertikale Ausrichtung: Mitte" sowohl am Eingang als auch an der Spanne hat für mich hervorragend funktioniert.
William Gross
6
display: block; float: left;scheint überflüssig zu sein
PHPst
4
Sie müssen kein for-Attribut verwenden, wenn Sie die Eingabe innerhalb des Etiketts haben. Es funktioniert ohne es.
Tommy Sørensen
6
Dies sollte meiner Meinung nach die akzeptierte Antwort sein. Es sind keine Anpassungen erforderlich.
Tim
4
Super und bestätigt funktioniert immer noch unter Chrome 58 (Windows) (im Gegensatz zur aktuellen Top-Antwort).
Jason C
188

Ich arbeite an der Lösung von One Crayon und habe etwas, das für mich funktioniert und einfacher ist:

.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; 
} 
<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Rendert Pixel für Pixel in Safari (dessen Basislinie ich vertraue) gleich und sowohl Firefox als auch IE7 checken als gut aus. Es funktioniert auch für verschiedene große und kleine Schriftgrößen. Nun zum Fixieren der IE-Basislinie für Auswahlen und Eingaben ...


Update: (Drittanbieter-Bearbeitung)

Die richtige bottomPosition hängt von der Schriftfamilie und der Schriftgröße ab! Ich fand, dass die Verwendung bottom: .08em;für Kontrollkästchen und Radioelemente ein guter allgemeiner Wert ist. Ich habe es in Chrome / Firefox / IE11 in Windows mit Arial- und Calibri-Schriftarten mit mehreren kleinen / mittleren / großen Schriftgrößen getestet.

.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! */
}
<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

S.Serpooshan
quelle
10
Nur ein Hinweis für andere: Dies funktioniert in IE6 nicht, da das CSS-Targeting [type = checkbox] nicht unterstützt wird.
Ein Wachsmalstift
3
Sie können einfach eine Klasse hinzufügen, anstatt nicht unterstützte Selektoren zu verwenden, wenn IE6-Unterstützung erforderlich ist.
Hartley San
1
Dieser hat für mich gearbeitet. Anstatt jedoch "Position: relativ; unten: 1 Pixel" festzulegen, können Sie "Rand: 0 0 1 Pixel 0" verwenden, um das gleiche Ergebnis zu erzielen.
Newman
142

Eine einfache Sache, die gut zu funktionieren scheint, besteht darin, die vertikale Position des Kontrollkästchens mit vertikaler Ausrichtung anzupassen. Es wird immer noch von Browser zu Browser unterschiedlich sein, aber die Lösung ist unkompliziert.

input {
    vertical-align: -2px;
}

Referenz

Frank Schwieterman
quelle
9
Das war die kleinste Änderung unter allen anderen, die für mich in den neuesten Versionen von Browsern funktioniert.
Johnny_D
6
Das funktioniert sogar noch besser als mit vertical-alignund position: relativeweil es auch in IE9 richtig funktioniert :)
Dennis98
5
aber es kommt auf die Schriftgröße an. Bei großen Schriftgrößen muss die Einstellung auf höhere negative Werte eingestellt werden, z. B.: vertikal ausrichten: -6px;
Serpooshan
1
Vermutlich kann dies mit verschiedenen Schriftarten besser funktionieren, wenn sie eingestellt sindem
YakovL
92

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>

Digitalsanctum
quelle
<label for="blah">Dies ist nur erforderlich, wenn Sie etwas verwenden, bei dem das Umschließen des Etiketts keinen Sinn ergibt (z. B. ein Textfeld; <label for="blah">Foo</label><input id="blah" type="text" />in diesem Fall werde ich es im Allgemeinen verwenden ). Mit Kontrollkästchen finde ich, dass es weniger Markup ist, es zu verpacken.
Ein Wachsmalstift
13
Nicht genau richtig: Mit dem Label-for können Benutzer auf das Label klicken, um das Kontrollkästchen zu aktivieren. Außerdem können sie einfach auf das Kontrollkästchen selbst klicken. Es ist sehr praktisch, um die beiden Elemente miteinander zu verbinden.
EndangeredMassa
26
Wenn eine Eingabe in einem Etikett verschachtelt ist, klicken Sie auf das Etikett, indem Sie die Eingabe aktivieren / fokussieren. Das for-Attribut gilt nur für den Fall, dass die Eingabe nicht verschachtelt ist.
Ein Wachsmalstift
3
Das ist wahr Einen Crayon, aber es ist immer noch gute Praxis des „für“ Attribut zu verwenden, oder Sie werden mit einigen Browsern haben Probleme , die diese Syntax nicht erkennen Husten IE.
Armstrongest
Wenn Sie nicht möchten, dass Ihr Kontrollkästchen eine ID hat, müssen Sie das Kontrollkästchen in das Etikett
einschließen
39

Probieren Sie meine Lösung aus, ich habe sie in IE 6, FF2 und Chrome ausprobiert und sie wird in allen drei Browsern Pixel für Pixel 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>

Waleed Eissa
quelle
3
Interessant; Ich mag die Idee, beide Elemente zu schweben; das behebt elegant das Verpackungsproblem. Ich bin daran gebunden, Eingaben mit Etiketten zu versehen, aber dieser Code ist um einiges sauberer als die Lösung, zu der ich gekommen bin.
Ein Wachsmalstift
In diesem Beispiel sollten die Eingabe und die Beschriftung des Kontrollkästchens auch eine Eigenschaftsanzeige haben: Block und in diesem Fall werden sie als normale
DIVs
5
Dies hat ein Problem. Was passiert, wenn das Etikett nicht in den verfügbaren Platz passt? Das Etikett und das Kontrollkästchen sind getrennt (das Kontrollkästchen befindet sich oben rechts und das Etikett unten links). Wenn Sie das Kontrollkästchen in Ihr Etikett einschließen, tritt dieses Problem nicht auf.
Enrique
Es funktionierte nicht pixelgenau, aber es war anständig genug, um die Dinge in den drei Hauptbrowsern besser aussehen zu lassen. Ich nehme an, ich hätte noch eine Stunde damit verbringen können, zu sehen, dass es besser funktionieren würde ...
Alexis Wilke
26

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

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

Heute in Chrome, Firefox, Opera, IE 7 und 8 getestet. Beispiel: Geige

Buzogany Laszlo
quelle
22

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

Mein HTML ist einfach:

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

Ich habe dann alle Kontrollkästchen 24pxfür Höhe und Breite aktiviert. Um den Text ausgerichtet Ich mache das Etikett ist line-heightauch 24pxund assign vertical-align: top;etwa so:

BEARBEITEN: Nach dem IE-Test habe ich vertical-align: bottom;die Eingabe hinzugefügt und das CSS des Labels geändert. Möglicherweise benötigen Sie einen bedingten IE-CSS-Fall, um das Auffüllen zu sortieren. Text und Feld sind jedoch 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;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Wenn jemand feststellt, dass dies nicht funktioniert, lassen Sie es mich bitte wissen. Hier ist es in Aktion (in Chrome und IE - Entschuldigung, da Screenshots auf der Netzhaut gemacht wurden und Parallelen für IE verwendet wurden):

Screenshot der Kontrollkästchen: Chrome Screenshot der Kontrollkästchen: IE

Patrick
quelle
1
Dies ist ziemlich alt, aber da Sie darum gebeten haben, Sie zu informieren, funktioniert dies in FireFox nicht gut (Kontrollkästchen befinden sich über der Grundlinie). Sie könnten an einer detaillierten Erklärung interessiert sein, die ich gepostet habe
YakovL
20

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

Plan B.
quelle
Zeilenhöhe, duh. Vergiss das immer. Gute Arbeit, funktioniert super.
Craig
13

<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.

Carlo Pires
quelle
11

Schauen wir uns zum Schluss die Ursache des Problems an

Die Kontrollkästchen werden mit Bildern gerendert (benutzerdefinierte können über CSS festgelegt werden). Hier ist ein (deaktiviertes) Kontrollkästchen in FireFox, das mit dem DOM-Inspektor hervorgehoben wird:

Es ist nur ein Quadrat

Und hier ist das gleiche nicht gestaltete Kontrollkästchen in Chrome:

Es ist ein nicht zentriertes Quadrat mit "Rändern" rechts und unten

Sie können den Rand sehen (orange); Polsterung ist nicht vorhanden (wird grün angezeigt). Was ist dieser Pseudorand rechts und unten im Kontrollkästchen? Dies sind Teile des Bildes, die für das Kontrollkästchen verwendet werden . Das ist der Grund, warum die Verwendung einfach vertical-align: middlenicht ausreicht und die Ursache für die browserübergreifenden Probleme ist.

Was können wir dagegen tun?

Eine naheliegende Option ist - ersetzen Sie die Bilder! Glücklicherweise kann man dies über CSS tun und diese durch externe Bilder, Base64-Bilder (In-CSS-Bilder), In-CSS-SVG oder einfach nur Pseudoelemente ersetzen. Es ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, die aus dieser Frage gestohlen wurde :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Vielleicht möchten Sie einige ausführlichere Artikel über solche Stile lesen, wie die hier aufgeführten . Es liegt außerhalb des Rahmens dieser Antwort.

Ok, was ist noch mit der Lösung ohne benutzerdefinierte Bilder oder Pseudoelemente?

TL; DR: Sieht so aus, als würde dies nicht funktionieren. Verwenden Sie stattdessen das benutzerdefinierte Kontrollkästchen

Beachten wir zunächst, dass es in anderen Browsern keine konsistente Lösung gab, wenn diese Pseudoränder innerhalb des Kontrollkästchensymbols willkürlich waren. Um eines zu erstellen, müssen wir die Anatomie solcher Bilder in vorhandenen Browsern untersuchen.

Welche Browser haben also die Pseudoränder in Kontrollkästchen? Ich habe Chrome 75, Vivaldi 2.5 (Chrom-basiert), FireFox 54 (fragen Sie nicht, warum so veraltet), IE 11, Edge 42, Safari? (für eine Minute ausgeliehen, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi haben solche Pseudoränder (ich vermute auch alle Chromium-basierten Browser wie Opera).

Wie groß sind diese Pseudoränder? Um dies herauszufinden, kann man ein gezoomtes Kontrollkästchen verwenden:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>

Mein Ergebnis ist ~ 7% der Breite / Höhe und damit 0,9-1,0 Pixel in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte zoomfür das Kontrollkästchen aus. In meinen Tests in Chrome und Vivaldi ist die relative Größe des Pseudorandes bei den zoomWerten 10, 20 und 11-19 (??) sehr unterschiedlich :

für Zoom = 10 sind es 7% während für Zoom = 11 es fast doppelt so hoch ist

scale scheint konsequenter zu sein:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>

also sind wahrscheinlich ~ 14% und 2px die richtigen Werte.

Nachdem wir nun die Größe des Pseudorandes kennen (?), Beachten wir, dass dies nicht ausreicht. Sind die Größen der Kontrollkästchensymbole für alle Browser gleich? Ach! Folgendes zeigt der DOM-Inspektor für nicht gestaltete Kontrollkästchen:

  • FireFox: 13,3 Pixel
  • Chrombasiert : 12,8 Pixel für das Ganze, daher 12,8 (100% - 14%) = 11 Pixel für das, was visuell als Kontrollkästchen wahrgenommen wird
  • IE 11, Edge: 13px
  • Safari: n / a (diese sollten meiner Meinung nach auf demselben Bildschirm verglichen werden)

Bevor wir nun Lösungen oder Tricks diskutieren, fragen wir uns: Was ist eine korrekte Ausrichtung? Was versuchen wir zu erreichen? Bis zu einem gewissen Punkt ist es Geschmackssache, aber im Grunde kann ich mir die folgenden "schönen" Ausrichtungsaspekte vorstellen:

Text und Kontrollkästchen auf derselben Grundlinie (ich passe die Größe der Kontrollkästchen hier absichtlich nicht an):

Geben Sie hier die Bildbeschreibung ein

oder haben die gleiche mittlere Zeile in Kleinbuchstaben:

Geben Sie hier die Bildbeschreibung ein

oder dieselbe mittlere Zeile in Großbuchstaben (es ist einfacher, den Unterschied für verschiedene Schriftgrößen zu erkennen):

Geben Sie hier die Bildbeschreibung ein

Außerdem müssen wir entscheiden, ob die Größe des Kontrollkästchens der Höhe eines Kleinbuchstabens, eines Großbuchstabens oder etwas anderem (größer, kleiner oder zwischen Kleinbuchstaben und Großbuchstaben) entsprechen soll.

Nennen wir für diese Diskussion eine Ausrichtung schön, wenn sich das Kontrollkästchen auf derselben Grundlinie wie der Text befindet und die Größe eines Großbuchstabens hat (eine sehr umstrittene Wahl):

Geben Sie hier die Bildbeschreibung ein

Welche Werkzeuge müssen wir nun:

  1. Passen Sie die Größe des Kontrollkästchens an
  2. Erkennen Sie Chromium anhand seines Kontrollkästchens mit Pseudorand und legen Sie bestimmte Stile fest
  3. Passen Sie die vertikale Ausrichtung des Kontrollkästchens / Etiketts an

?

  1. Die in Bezug auf Kontrollkästchen Größenanpassung : Es gibt width, height, size, zoom, scale(habe ich etwas verpasst?). zoomund scaleerlauben Sie nicht, die absolute Größe festzulegen, daher helfen sie möglicherweise nur beim Anpassen an die Textgröße, nicht beim Festlegen der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben). sizefunktioniert nicht mit Chrome (hat es mit altem IE funktioniert? sowieso ist es nicht so interessant). widthund heightarbeiten in Chrome und anderen Browsern, sodass wir eine gemeinsame Größe festlegen können, aber auch in Chrome wird die Größe des gesamten Bilds festgelegt, nicht das Kontrollkästchen selbst. Hinweis: Es ist das Minimum (Breite, Höhe), das die Größe eines Kontrollkästchens definiert (wenn Breite ≠ Höhe ist, wird der Bereich außerhalb des Kontrollkästchenquadrats zum "Pseudorand" hinzugefügt).

    Leider werden die Pseudoränder im Chrome-Kontrollkästchen, soweit ich sehen kann, für keine Breite und Höhe auf Null gesetzt.

  2. Ich fürchte, es gibt heutzutage keine zuverlässige Nur-CSS-Methode .

  3. Betrachten wir die vertikale Ausrichtung. vertical-alignWenn middleoder baselineaufgrund des Pseudorandes von Chrome nicht konsistente Ergebnisse erzielt werden können , besteht die einzige echte Option, um für alle Browser das gleiche "Koordinatensystem" zu erhalten, darin, Beschriftung und Eingabe auf Folgendes auszurichten top:

    Vergleich der vertikalen Ausrichtung: oben und unten

    (auf dem Bild: vertikal ausrichten: oben, unten und unten ohne Kastenschatten)

Welches Ergebnis erhalten wir daraus?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}
<label><input type="checkbox">label</label>

Das obige Snippet funktioniert mit Chrome (Chromium-basierte Browser), andere Browser erfordern jedoch eine kleinere Größe des Kontrollkästchens. Es scheint unmöglich zu sein, sowohl die Größe als auch die vertikale Ausrichtung so anzupassen, dass die Bild-Eigenart des Chromium-Kontrollkästchens umgangen wird. Mein letzter Vorschlag lautet: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - und Sie vermeiden Frustration :)

YakovL
quelle
Diese Antwort ist so tiefgreifend!
Marecky
10

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 vorangestellten Version:

Bryan Willis
quelle
10

Ich denke, das ist der einfachste Weg

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

gidzior
quelle
Die Frage ist: Funktioniert es in allen Browsern gut? ;-)
JonSnow
9

Ich mag die relative Positionierung nicht, weil dadurch das Element auf seiner Ebene über alles andere gerendert wird (es kann auf etwas übergehen, wenn Sie ein komplexes Layout haben).

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

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

Wasserplädoyer
quelle
Scheint zu funktionieren, solange die Schriftgröße nicht zu groß ist.
Robsch
9

Das funktioniert gut für mich:

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>

Dylanfm
quelle
8
segne dich dafür, dass du ems anstelle von pxs verwendest.
IDisposable
7

Die gewählte Antwort mit mehr als 400 Upvotes funktionierte in Chrome 28 OSX nicht für mich, wahrscheinlich weil sie nicht in OSX getestet wurde oder weil sie in 2008 funktioniert hat, als diese Frage beantwortet wurde.

Die Zeiten haben sich geändert und neue CSS3-Lösungen sind jetzt möglich. Meine Lösung verwendet Pseudoelemente , um ein benutzerdefiniertes Kontrollkästchen zu erstellen . Die Bestimmungen (Vor- oder Nachteile, wie auch immer Sie es betrachten) lauten also wie folgt:

  • Funktioniert nur in modernen Browsern (FF3.6 +, IE9 +, Chrome, Safari)
  • Verlässt sich auf ein benutzerdefiniertes Kontrollkästchen, das in jedem Browser / Betriebssystem genau gleich gerendert wird. Hier habe ich gerade einige einfache Farben ausgewählt, aber Sie können immer lineare Verläufe und dergleichen hinzufügen, um es mehr zu einem Knall zu machen.
  • Ist auf eine bestimmte Schriftart / Schriftgröße ausgerichtet. Wenn Sie diese ändern, ändern Sie einfach die Position und Größe des Kontrollkästchens, damit es vertikal ausgerichtet angezeigt wird. Bei korrekter Optimierung sollte das Endergebnis in allen Browsern / Betriebssystemen nahezu gleich sein.
  • Keine vertikalen Ausrichtungseigenschaften, keine Floats
  • In meinem Beispiel muss das bereitgestellte Markup verwendet werden. Es funktioniert nicht, wenn es wie die Frage strukturiert ist. Das Layout sieht jedoch im Wesentlichen gleich aus. Wenn Sie Dinge verschieben möchten, 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 der Beschriftung Pseudoelemente hinzu und formatiert sie, um das sichtbare Kontrollkästchen zu erstellen. Da das Etikett an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld weiterhin aktualisiert und der Wert wird mit dem Formular gesendet.

Und wenn Sie interessiert sind, sehen Sie hier meine Optionsfelder: http://jsfiddle.net/DtKrV/2/

Hoffe jemand findet das nützlich!

MusikAnimal
quelle
6

Ich hatte noch nie ein Problem damit:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
John Topley
quelle
4
Wie ich bereits zu früheren Postern gesagt habe, die Folgendes empfohlen haben: Ich mag es nicht, weil es unnötiges Markup erfordert. Ich habe auch dieses Markup ausprobiert, aber es war schwierig zu verhindern, dass das Etikett unter die Eingabe gewickelt wird (während immer noch Etikett / Eingabegruppe in eigenen Zeilen vorhanden ist).
Ein Wachsmalstift
7
Anstelle von "unnötigem" Markup (das wahrscheinlich von fast allen verwendet wird) hätten Sie lieber unnötiges CSS?
Robert C. Barth
10
Das Problem beim Verpacken steht. Aber im Allgemeinen würde ich lieber fremdes CSS als Markup haben, da das CSS zwischengespeichert wird, aber das Markup muss möglicherweise für jede neue Seite neu geladen werden.
Ein Wachsmalstift
4
Vergleichen Sie: 1 Instanz von zusätzlichem CSS - gegen viele Instanzen von zusätzlichem Markup.
Greg
6

Wenn Sie ASP.NET Web Forms verwenden, müssen Sie sich keine Gedanken über DIVs und andere Elemente oder feste Größen machen. Wir können den <asp:CheckBoxList>Text ausrichten, indem float:leftwir den Eingabetyp CheckboxList in CSS festlegen.

Bitte überprü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>
Rama Subba Reddy M.
quelle
3

Wenn Sie Twitter Bootstrap verwenden, können Sie die checkboxKlasse einfach für Folgendes verwenden <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
Sunil D.
quelle
3

Mit einem Kontrollkästchen für den Eingabetyp, das in das Etikett eingewickelt ist und wie folgt nach links schwebt:

<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;
}

Stellen Sie sicher, dass die Höhe des mit der Linienhöhe des (Blocklevel) identisch ist.

Matijs
quelle
3

Codieren Sie die Höhe und Breite des Kontrollkästchens fest, entfernen Sie die Polsterung und machen Sie die Höhe plus vertikale Ränder gleich der Zeilenhöhe des Etiketts. Wenn der Beschriftungstext inline ist, schweben Sie das Kontrollkästchen. Firefox, Chrome und IE7 + rendern das folgende Beispiel identisch: http://www.kornea.com/css-checkbox-align

user2407309
quelle
Nett! Sie sollten jedoch in Betracht ziehen, den HTML- und CSS-Code hier zu kopieren. Von Antworten, die so stark von einem externen Link abhängen, wird abgeraten. Der Link ist immer noch wertvoll, um die Ergebnisse zu sehen, aber ich denke, dass das Anzeigen des Codes hier Ihnen hilft, mehr Stimmen zu erhalten.
Mariano Desanze
Nein, das tun sie nicht (vergleiche in FireFox und in Chrome, in Chrome liegen die Kontrollkästchen über der Grundlinie), ich habe erklärt, warum
YakovL
Sie behaupten, dass das Ding selbst mit Screenshots von beiden Browsern nicht unterstützt wird. Es ist Ihre Aufgabe, Beweise für einen Anspruch zu liefern, wenn Sie einen geltend machen, nicht andere, um ihn zu widerlegen. Ich habe diese verglichen und die Screenshots hinzugefügt, aber Kommentare unterstützen das Hinzufügen von Bildern nicht. Sie können sich jedoch Bilder in meiner Antwort ansehen. Dies kann jedoch bei Browserversionen unterschiedlich sein. Daher wäre es hilfreich, Screenshots mit Anmerkungen zu versehen, die Browserversionen enthalten.
YakovL
Besuchen Sie die Seite, auf die ich in verschiedenen Browsern verlinkt habe.
Vladimir Kornea
Also habe ich das gemacht, oder? :) Siehst du den Unterschied nicht? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Während sie in FireFox perfekt ausgerichtet sind, bezieht sich das Kontrollkästchen in Chrome auf die Grundlinie (Sie können übrigens Erwähnungen über @ verwenden, wenn Sie an schnelleren Antworten interessiert sind)
YakovL
3

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Prime
quelle
2

Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache dann seine "Beschriftung" zu einem separaten Element. Es ist ein Schmerz, aber es gibt so viele browserübergreifende Unterschiede zwischen der Anzeige von Kontrollkästchen und ihren Beschriftungen (wie Sie bemerkt haben), dass ich nur so annähernd steuern kann, wie alles aussieht.

Aus dem gleichen Grund mache ich dies auch in der Winforms-Entwicklung. Ich denke, das grundlegende Problem mit dem Kontrollkästchen-Steuerelement besteht darin, dass es sich tatsächlich um zwei verschiedene Steuerelemente handelt: das Kontrollkästchen und das Etikett. Wenn Sie ein Kontrollkästchen verwenden, überlassen Sie es den Implementierern des Steuerelements, zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie verstehen es immer falsch, wobei falsch = nicht das, was Sie wollen).

Ich hoffe wirklich, dass jemand eine bessere Antwort auf Ihre Frage hat.

MusiGenesis
quelle
2

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

Der obige Code platziert Ihre Listenelemente in drei Elementen und ändert nur die Breite entsprechend.

Philip Bevan
quelle
2

Das Folgende sorgt für eine pixelgenaue Konsistenz über alle Browser hinweg, sogar über IE9:

Der Ansatz ist durchaus sinnvoll, bis er offensichtlich ist:

  1. Erstellen Sie eine Eingabe und eine Beschriftung.
  2. Zeigen Sie sie als Block an, damit Sie sie nach Belieben schweben lassen können.
  3. Stellen Sie die Höhe und die Linienhöhe auf den gleichen Wert ein, um sicherzustellen, dass sie vertikal zentriert und ausgerichtet sind.
  4. Für em- Messungen muss der Browser zur Berechnung der Höhe der Elemente die Höhe der Schriftart für diese Elemente kennen und darf nicht selbst in em-Messungen festgelegt werden.

Dies führt zu einer global anwendbaren allgemeinen 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 neuesten Versionen von Chrome, Safari und Firefox für Mac, Windows, Iphone und Android. Und IE9.

Diese Methode ist wahrscheinlich auf alle Eingabetypen anwendbar, die nicht höher als eine Textzeile sind. Wenden Sie eine entsprechende Typregel an.

Henrik Erlandsson
quelle
hm, das sieht gut aus, wenn das Etikett mit einem Kleinbuchstaben beginnt, aber wenn es mit einem Großbuchstaben beginnt, ist es viel schlimmer. Könnten Sie hier einen Ausschnitt hinzufügen?
YakovL
2

Ich weiß also, dass dies schon oft beantwortet wurde, aber ich habe das Gefühl, dass ich eine elegantere Lösung habe als die, die bereits bereitgestellt wurden. Und nicht nur 1 elegante Lösung, sondern 2 separate Lösungen, die Sie begeistern werden. Alles, was Sie wissen und sehen müssen, ist in 2 JS Fiddles mit Kommentaren enthalten.


Lösung Nr. 1 basiert auf dem nativen "Kontrollkästchen" des angegebenen Browsers, allerdings mit einer Wendung ... Es ist in einem div enthalten, das sich browserübergreifend leichter positionieren lässt, mit einem Überlauf: versteckt, um den Überschuss eines 1px-gestreckten Kontrollkästchens zu beseitigen (Dies ist so, dass Sie die hässlichen Grenzen von FF nicht sehen können)

Einfache HTML: (folgen Sie dem Link , um die CSS mit Kommentaren zu überprüfen, ist Codeblock zu erfüllen Stackoverflow) http://jsfiddle.net/KQghJ/

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

Lösung 2 verwendet den "Checkbox Toggle Hack", um den CSS-Status eines DIVs umzuschalten, der im Browser ordnungsgemäß positioniert wurde, und mit einem einfachen Sprite für die deaktivierten und aktivierten Kontrollkästchen-Status einzurichten. Alles, was benötigt wird, ist die Anpassung der Hintergrundposition mit dem Checkbox Toggle Hack. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Radios haben und garantieren können, dass sie im gesamten Browser gleich aussehen.

Einfaches HTML: (Folgen Sie dem Link, um das CSS mit Kommentaren zu überprüfen. Der Codeblock soll StackOverflow erfüllen.) Http://jsfiddle.net/Sx5M2/

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

Wenn jemand mit diesen Methoden nicht einverstanden ist, hinterlassen Sie mir bitte einen Kommentar. Ich würde gerne ein Feedback dazu hören, warum andere nicht auf diese Lösungen gestoßen sind, oder wenn ja, warum ich hier keine Antworten dazu sehe. Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es auch schön, das zu sehen, aber diese wurden in den neuesten Browsern getestet und basieren auf HTML / CSS-Methoden, die ziemlich alt und meines Erachtens universell sind.

NinjaKC
quelle
1

Yay danke! Auch das hat mich für immer verrückt gemacht.

In meinem speziellen Fall hat dies bei mir funktioniert:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Ich verwende die Datei reset.css, die einige der Unterschiede erklären könnte, aber dies scheint für mich gut zu funktionieren.

Jeff
quelle
1

position: relative; hat einige Probleme im IE mit Z-Index und Animationen wie jQuerys slideUp / slideDown.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Das Styling muss wahrscheinlich in Abhängigkeit von der verwendeten Schriftgröße angepasst werden <label>

PS:
Ich benutze ie7js , damit das CSS in IE6 funktioniert.

Bob Fanger
quelle
1

Verwenden Sie einfach vertical-align: sub, wie Pokrishka bereits vorgeschlagen.

Geige

HTML Quelltext:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS-Code:

.checkboxes input {
    vertical-align: sub;
}
Marco Sulla
quelle
1

Einfache Lösung:

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

Getestet in Chrome, Firefox, IE9 +, Safari, iOS 9+

Dylan Sharhon
quelle