it-swarm.com.de

Wie Sie Kontrollkästchen und ihre Beschriftungen konsistent über Browser hinweg ausrichten

Dies ist eines der kleineren CSS-Probleme, das mich ständig plagt. Wie richten Leute um Stack Overflow vertikalcheckboxesund ihrelabelskonsistent crossbrowser aus? Wenn ich sie in Safari richtig ausrichte (normalerweise vertical-align: baseline für die input), sind sie in Firefox und IE vollständig deaktiviert. Beheben Sie das Problem in Firefox, und Safari und IE werden unweigerlich durcheinander gebracht. Ich verschwende jedes Mal Zeit, 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, daher sind Formularelemente relativ frei von Überschreibungen. Freuen Sie sich auf alle Tipps oder Tricks, die Sie anbieten müssen!

1579
One Crayon

Nach über einer Stunde des Optimierens, Testens und Ausprobieren verschiedener Markierungsstile denke ich, dass ich eine anständige Lösung habe. Die Anforderungen für dieses spezielle Projekt waren:

  1. Die Eingaben müssen sich in einer eigenen Zeile befinden.
  2. Checkbox-Eingaben müssen in allen Browsern auf ähnliche Weise (wenn nicht identisch) mit dem Etikettentext ausgerichtet werden.
  3. Wenn der Beschriftungstext umbrochen wird, muss er eingerückt werden (also kein Umbruch unter dem Kontrollkästchen).

Bevor ich zu einer Erklärung komme, gebe ich Ihnen 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 JSFiddle .

In diesem Code wird davon ausgegangen, dass Sie einen Reset wie Eric Meyer verwenden, der die Formulareingänge und die Auffüllung nicht überschreibt (daher werden in den Eingabe-CSS-Bereich Margin- und Auffüllrücksetzungen zurückgesetzt). Natürlich werden Sie in einer Live-Umgebung wahrscheinlich Sachen verschachteln, um andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach halten.

Dinge zu beachten:

  • Die *overflow-Deklaration ist ein Inline IE -Hack (der Stern-Eigenschafts-Hack). Beide IE 6 und 7 werden es bemerken, aber Safari und Firefox werden es richtig ignorieren. Ich denke, es könnte gültiges CSS sein, aber mit bedingten Kommentaren ist es noch besser. nur zur Vereinfachung verwendet.
  • Wie ich am besten feststellen kann, war die einzige vertical-align-Anweisung, die in allen Browsern konsistent war, vertical-align: bottom. Wenn Sie dies einstellen und sich dann relativ nach oben positionieren, verhielten Sie sich in Safari, Firefox und IE fast identisch, wobei nur ein oder zwei Pixel voneinander abweichen.
  • Das Hauptproblem bei der Arbeit mit Alignments ist, dass IE eine Reihe von geheimnisvollen Räumen um Eingabeelemente klebt. Es ist kein Polster oder Rand und es ist verdammt hartnäckig. Durch das Festlegen von Breite und Höhe für das Kontrollkästchen und dann aus overflow: hidden wird aus irgendeinem Grund der zusätzliche Platz abgeschnitten und die Positionierung des IE kann sehr ähnlich zu Safari und Firefox sein.
  • Abhängig von Ihrer Textgröße müssen Sie zweifellos die relative Position, Breite, Höhe usw. anpassen, damit die Dinge richtig aussehen.

Hoffe das hilft jemand anderem! Ich habe diese spezielle Technik an keinem anderen Projekt als dem, an dem ich heute Morgen gearbeitet habe, ausprobiert. Wenn Sie also etwas finden, das beständiger funktioniert, sollten Sie sich unbedingt entlocken. 

947
One Crayon

Für das vertikale Ausrichten sind manchmal zwei Inline-Elemente (Span, Beschriftung, Eingabe usw.) nebeneinander erforderlich, damit sie ordnungsgemäß 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 schweben alle in derselben Zeile nebeneinander, aber die Nowrap bedeutet, dass der gesamte Beschriftungstext immer neben dem Kontrollkästchen 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>

Wenn Sie jetzt einen sehr langen Label-Text haben, der benötigt umwickelt werden soll, ohne unter das Kontrollkästchen zu springen, würden Sie die Label-Elemente mit Padding und negativen Texteinzug versehen:

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

183
Nathan Bowers

Aus der One Crayon's Lösung habe ich 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>

Bildet für Pixel dasselbe in Safari (dessen Basislinie ich vertraue), und Firefox und IE7 sind genauso gut. Es funktioniert auch für verschiedene Etikettengrößen (groß und klein). Nun, zum Festlegen der IE-Basislinie für Auswahl und Eingabe ...


Update: (Bearbeitung durch Dritte)

Die richtige bottom-Position hängt von der Schriftfamilie und der Schriftgröße ab! Die Verwendung von bottom: .08em; für Checkbox- und Radio-Elemente ist ein guter allgemeiner Wert. Ich habe es in Chrome/Firefox/IE11 unter Windows mit Arial & Calibri-Schriftarten getestet, wobei mehrere kleine/mittlere/große Schriftgrößen verwendet wurden.

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

167

Eine einfache Sache, die anscheinend gut funktioniert, 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

124

probiere vertical-align: middle

ihr Code scheint auch so zu sein:

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

85
digitalsanctum

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

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

Die einzig 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: Fiddle

24
Buzogany Laszlo

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>

Hoffentlich hilft das.

18
Bryan A

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>

Dann setze ich alle Kontrollkästchen für Höhe und Breite auf 24px. Um den Text auszurichten, mache ich den line-height des Labels und 24px und weise vertical-align: top; so zu:

EDIT: Nach dem Testen von IE fügte ich der Eingabe vertical-align: bottom; hinzu und änderte die CSS des Labels. Möglicherweise benötigen Sie einen bedingten IE css-Fall, um die Auffüllung zu sortieren. Der Text und das 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;
}

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 den IE verwendet wurden):

screenshot of checkboxes: Chromescreenshot of checkboxes: IE

12
Patrick

Ich denke, das ist der einfachste Weg

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

Fiddle

10
gidzior

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>

9
dylanfm

Nun, da Flexbox in allen modernen Browsern unterstützt wird, scheint mir dies etwas einfacher 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-Version mit dem Präfix:

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>

8
Bryan Willis

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

Ich habe festgestellt, dass vertical-align: sub die Kontrollkästchen in Chrome, Firefox und Opera gut genug ausschaut. Safari kann nicht überprüft werden, da ich kein MacOS habe und IE10 ein wenig aus ist, aber ich habe festgestellt, dass dies 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%/Pixel/EMs anzupassen: http://css-tricks.com/snippets/css/browser -spezifische Hacks/

8
pokrishka

Ich hatte noch nie ein Problem damit:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
7
John Topley

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

Die Zeiten haben sich geändert, und neue CSS3-Lösungen sind jetzt machbar. Meine Lösung verwendet pseudoelements , um eine benutzerdefinierte Checkbox zu erstellen. Die Bestimmungen (Vor- oder Nachteile, wie auch immer Sie es betrachten) sind 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 dargestellt wird. Ich habe hier nur ein paar einfache Farben ausgewählt, aber Sie könnten immer lineare Farbverläufe hinzufügen und so, dass sie eher knallig wirken.
  • Ist auf eine bestimmte Schriftart/Schriftgröße ausgerichtet, die bei einer Änderung geändert wird, ändern Sie einfach die Position und Größe des Kontrollkästchens, um es vertikal auszurichten. Bei korrekter Anpassung sollte das Endergebnis in allen Browser-/Betriebssystemen immer noch nahezu identisch sein.
  • Keine vertikalen Ausrichtungseigenschaften, keine Schwebekörper
  • Muss das bereitgestellte Markup in meinem Beispiel verwenden, es funktioniert nicht, wenn es wie die Frage strukturiert ist. Das Layout wird jedoch im Wesentlichen gleich aussehen. Wenn Sie Dinge verschieben möchten, müssen Sie auch das zugehörige CSS verschieben

Ihr HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Dein CSS:

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

Diese Lösung verbirgt das Kontrollkästchen und fügt dem Label Pseudoelemente hinzu und formatiert sie, um das sichtbare Kontrollkästchen zu erstellen. Da das Label an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld immer noch aktualisiert und der Wert wird mit dem Formular übermittelt.

jsFiddle: http://jsfiddle.net/SgXYY/6/

Und wenn Sie interessiert sind, hier meine Auswahl über Radioknöpfe: http://jsfiddle.net/DtKrV/2/

Hoffe, jemand findet das nützlich!

6
MusikAnimal

Ich wollte nur die Diskussion über das 'for'-Attribut auf Etiketten hinzufügen (etwas offtopic):

Bitte geben Sie es an, auch wenn es nicht notwendig ist, weil es sehr bequem ist, es von Javascript aus zu verwenden:

var label = ...
var input = document.getElementById(label.htmlFor);

Das ist viel bequemer als der Versuch herauszufinden, ob das Etikett verschachtelt ist oder ob die Eingabe vor dem Etikett oder nach dem Etikett liegt.

Nur meine 2 Cent.

6
Stijn

Wenn Sie ASP.NET Web Forms verwenden, müssen Sie sich nicht um DIVs und andere Elemente oder feste Größen kümmern. Wir können den Text <asp:CheckBoxList> ausrichten, indem Sie float:left auf den Eingabetyp CheckboxList in CSS setzen.

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>
6
<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 Inline-Block zu verwenden, wenn das Label-Tag verwendet wird.

4
Carlo Pires

Schauen wir uns zum Schluss die Ursache des Problems an

Die Kontrollkästchen werden mithilfe von Bildern gerendert (man kann benutzerdefinierte über CSS festlegen). Hier ist ein (nicht angehaktes) Kontrollkästchen in FireFox, das im DOM-Inspektor hervorgehoben ist:

it's just a square

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

it's an uncentered square with "margins" on the right and on the bottom

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

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), in-CSS svg oder nur Pseudoelemente ersetzen. Es ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, die diese 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 ein solches Styling lesen, wie zum Beispiel die folgenden hier ; Es liegt außerhalb des Rahmens dieser Antwort.

Ok, was ist noch mit No-Custom-Images-or-Pseudo-Elements-Lösung?

TL; DR: sieht so aus, als würde das nicht funktionieren, benutze stattdessen ein benutzerdefiniertes Kontrollkästchen

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

Also, welche Browser haben die Pseudoränder in Checkboxen? Ich habe Chrome 75, Vivaldi 2.5 (auf Chrom basierend), FireFox 54 (fragen Sie nicht, warum dies veraltet ist), IE 11, Edge 42, Safari ?? (eine für eine Minute ausgeliehen, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi haben solche Pseudoränder (ich vermute, dass 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 somit 0,9-1,0px in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte von zoom für das Kontrollkästchen aus. In meinen Tests in Chrome und Vivaldi ist die relative Größe des Pseudorandes bei zoom Werten 10, 20 und bei Werten 11-19 (??) sehr unterschiedlich:

for zoom = 10 it's 7%while for zoom = 11 it's almost twice that value

scale scheint konsistenter 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.

Nun, da wir die Größe des Pseudorandes kennen (?), Stellen wir fest, dass dies nicht ausreicht. Sind die Größen der Kontrollkästchensymbole für alle Browser gleich? Ach! Folgendes wird im DOM-Inspektor für nicht gestaltete Kontrollkästchen angezeigt:

  • Firefox: 13.3px
  • Chrom-basiert: 12,8px für das Ganze, daher 12,8 (100% - 14%) = 11px für das, was visuell als Kontrollkästchen wahrgenommen wird
  • IE 11, Edge: 13px
  • Safari: n/a (diese sollten, glaube ich, auf demselben Bildschirm verglichen werden)

Bevor wir nun Lösungen oder Tricks diskutieren, fragen wir: 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 Aspekte von "Nizza" -Ausrichtungen vorstellen:

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

enter image description here

oder haben die gleiche Mittellinie in Kleinbuchstaben:

enter image description here

oder die gleiche Mittellinie in Großbuchstaben (es ist einfacher, den Unterschied für verschiedene Schriftgrößen zu erkennen):

enter image description here

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 ein Alignment Nice, wenn sich das Kontrollkästchen auf derselben Grundlinie wie der Text befindet und die Größe eines Großbuchstabens hat (eine sehr umstrittene Wahl):

enter image description here

Nun, welche Werkzeuge müssen wir haben:

  1. größe des Kontrollkästchens anpassen
  2. erkennen Sie Chromium anhand seines pseudorandigen Kontrollkästchens und legen Sie bestimmte Stile fest
  3. passen Sie die vertikale Ausrichtung des Kontrollkästchens/Etiketts an

?

  1. In Bezug auf Anpassung der Kontrollkästchengröße : Es gibt width, height, size, zoom, scale (habe ich etwas verpasst?). zoom und scale können keine absolute Größe festlegen, daher können sie nur beim Anpassen der Textgröße hilfreich sein, nicht beim Festlegen der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben). size funktioniert nicht mit Chrome (hat es mit dem alten IE funktioniert? Auf jeden Fall ist es nicht so interessant). width und height funktionieren in Chrome und anderen Browsern, sodass wir eine gemeinsame Größe festlegen können. In Chrome wird jedoch die Größe des gesamten Bildes und nicht das Kontrollkästchen selbst festgelegt. Hinweis: Das Minimum (Breite, Höhe) definiert die Größe eines Kontrollkästchens (wenn Breite ≠ Höhe, wird der Bereich außerhalb des Kontrollkästchens zum "Pseudorand" hinzugefügt).

    Leider sind die Pseudoränder in der Checkbox Chrome meines Erachtens für keine Breite und Höhe auf Null gesetzt.

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

  3. Betrachten wir die vertikale Ausrichtung. vertical-align kann keine konsistenten Ergebnisse liefern, wenn middle oder baseline eingestellt ist. Aufgrund des Pseudorandes von Chrome ist es die einzige echte Option, dass alle Browser dasselbe "Koordinatensystem" erhalten, Beschriftung und Eingabe an top auszurichten. :

    comparing vertical-align: top and bottom

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

Welches Ergebnis erhalten wir also 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 auf eine Weise anzupassen, die die Bildtrubel der Chromium-Checkbox umgeht. Mein letzter Vorschlag ist: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - und Sie vermeiden Frust:)

4
YakovL

Die Höhe und Breite des Kontrollkästchens hartcodieren, die Auffüllung entfernen und Höhe und vertikale Ränder der Zeilenhöhe des Etiketts anpassen. Wenn der Beschriftungstext Inline ist, setzen Sie das Kontrollkästchen. In Firefox, Chrome und IE7 + wird das folgende Beispiel identisch dargestellt: http://www.kornea.com/css-checkbox-align

4
Vladimir Kornea

Wenn Sie Twitter Bootstrap verwenden, können Sie einfach die checkbox-Klasse für den <label> verwenden:

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

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

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

das hat für mich 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 von der der Zeilenhöhe von (Blockebene) entspricht.

3
Matijs

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

3
Prime

Verwenden Sie einfach vertical-align: sub, da pokrishka bereits vorgeschlagen wurde.

Fiddle

HTML Quelltext:

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

CSS-Code:

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

Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache dann das "Label" zu einem separaten Element. Es ist ein Schmerz, aber es gibt so viele Cross-Browser-Unterschiede zwischen der Anzeige der Kontrollkästchen und ihrer Beschriftungen (wie Sie bemerkt haben), dass ich auf diese Weise nur so steuern kann, wie alles aussieht.

Aus dem gleichen Grund mache ich das auch in der Winforms-Entwicklung. Ich denke, das grundlegende Problem bei der Checkbox ist, dass es sich wirklich um zwei verschiedene Steuerelemente handelt: die Box und das Label. Wenn Sie ein Kontrollkästchen verwenden, überlassen Sie es den Umsetzern des Steuerelements, zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie bekommen es immer falsch, wobei falsch = nicht das, was Sie wollen).

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

2
MusiGenesis

Ich weiß, dass dies viele Male beantwortet wurde, aber ich habe das Gefühl, dass ich eine elegantere Lösung habe als die, die bereits bereitgestellt wurde. Und nicht nur eine elegante Lösung, sondern zwei separate Lösungen, die Ihre Fantasie anregen. Alles in allem, was Sie wissen und sehen müssen, ist in 2 JS Fiddle enthalten, mit Kommentaren.


Lösung Nr. 1 basiert auf der nativen "Checkbox" des angegebenen Browsers, allerdings mit einer gewissen Wendung ... Die Datei ist in einem Div enthalten, das einfacher über einen Browser zu positionieren ist, mit einem Überlauf: versteckt, um das überstehende 1px-Kontrollkästchen zu hacken (Dies ist so, Sie können die hässlichen Grenzen von FF nicht sehen)

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

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

Lösung Nr. 2 verwendet "Checkbox Toggle Hack", um den CSS-Status eines DIV umzuschalten, das ordnungsgemäß im Browser positioniert wurde, und das Setup mit einem einfachen Sprite für das Kontrollkästchen "Kontrollkästchen deaktiviert" und "Kontrollkästchen" zu aktivieren. Sie müssen lediglich die Hintergrundposition mit Checkbox Toggle Hack anpassen. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Funkgeräte haben und sicherstellen können, dass sie in allen Browsern gleich aussehen.

Simple 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 hören, warum andere nicht auf diese Lösungen gestoßen sind. Wenn ja, warum sehe ich hier keine Antworten? Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es schön, das auch zu sehen. Diese wurden jedoch in den neuesten Browsern getestet und basieren auf HTML/CSS-Methoden, die recht alt sind und soweit ich gesehen habe.

2
NinjaKC

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 fügt Ihre Listenelemente in drei Spalten ein und ändert nur die Breite entsprechend.

2
Philip Bevan

Folgendes gibt pixelgenaue Konsistenz für alle Browser, auch für IE9:

Die Annäherung ist ziemlich vernünftig, bis sie offensichtlich ist:

  1. Erstellen Sie eine Eingabe und ein Label.
  2. Zeigen Sie sie als Block an, damit Sie sie wie gewünscht schweben können.
  3. Stellen Sie die Höhe und die Höhe der Linie auf denselben Wert ein, um sicherzustellen, dass sie zentriert und vertikal ausgerichtet sind.
  4. Beiem-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.

Daraus ergibt sich eine global geltende allgemeine Regel:

input, label {display:block;float:left;height:1em;line-height:1em;}

Mit anpassbarer Schriftgröße pro Formular, Feldset oder Element.

#myform input, #myform label {font-size:20px;}

In den neuesten Versionen von Chrome, Safari und Firefox unter Mac, Windows, Iphone und Android getestet. Und IE9.

Diese Methode ist wahrscheinlich auf alle Eingabetypen anwendbar, die nicht über einer Textzeile liegen. Wenden Sie eine passende Typregel an.

1

Vielen Dank! Auch das hat mich für immer verrückt gemacht. 

In meinem speziellen Fall hat das für mich 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 reset.css, die einige der Unterschiede erklären könnte, aber das scheint mir gut zu gehen.

1
Jeff

position: relative; hat einige Probleme in IE mit z-index und Animationen wie SlideUp/SlideDown von jQuery.

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 abhängig von der in <label> verwendeten Schriftgröße möglicherweise angepasst werden.

PS:
Ich benutze ie7js , um die CSS in IE6 zum Laufen zu bringen. 

1
Bob Fanger
<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

Sie sollten Formularsteuerelemente in ihren eigenen Feldern sowieso zusammenfassen, hier wird Wrappa gespielt. Eingabe/Beschriftung einstellen: Block, Eingabeflotte links, Beschriftungsfläche rechts, Breite einstellen, Abstand mit linkem/rechtem Rand steuern, Beschriftungstext entsprechend ausrichten. 

so

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

sie müssen wahrscheinlich sowohl für Cross-Browser- als auch für Media-Lösungen Rahmen, Umrisse und Strichhöhe für beide festlegen. 

1
albert

Vielleicht machen manche Leute den gleichen Fehler wie ich? Was war ... Ich hatte eine Breite für die Eingabefelder festgelegt, weil sie größtenteils vom Typ 'Text' waren, aber dann vergessen, diese Breite für Kontrollkästchen zu überschreiben - also versuchte mein Kontrollkästchen, viel Breite und Breite zu beanspruchen Daher war es schwierig, ein Etikett daneben auszurichten.

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}
<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

Verfügt über anklickbare Beschriftungen und eine korrekte Ausrichtung bereits im IE6 (unter Verwendung eines Klassenselektors) und in späteren Versionen von Firefox, Safari und Chrome

0
Geoff Kendall

Dies ist nicht der beste Weg, um das Problem zu lösen

vertical-align: middle

Durch Hinzufügen von style="position:relative;top:2px;" zum Eingabefeld würde es 2px nach unten verschoben. Abhängig von Ihrer Schriftgröße können Sie sie verschieben.

0
rene

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+

0
Dylan Sharhon

Ich fand die einzige Möglichkeit, sie in einer Reihe aufzustellen, die absolute Position für die Eingabe zu verwenden. Mit der Top-Variable der Eingabe herumzuspielen, hatte das gewünschte Ergebnis.

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}
0
vladiim