Wie ausrichten Kontrollkästchen und ihre Etiketten konsequent Cross-Browser

StackOverflow https://stackoverflow.com/questions/306252

Frage

Dies ist einer der kleineren CSS Probleme, die mich ständig plagt. Wie Leute um Stack-Überlauf vertikal ausrichten checkboxes und ihr labels konsequent Cross-Browser ? Jedes Mal, wenn ich sie richtig in Safari ausgerichtet (in der Regel vertical-align: baseline auf dem input verwendet wird), sind sie völlig aus in Firefox und IE. Fix it in Firefox und Safari und IE sind unvermeidlich vermasselt. Ich Zeit auf dieser jeder Zeit verschwenden ich ein Formular codieren.

Hier ist der Standard-Code, mit denen ich arbeite: 

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

ich in der Regel Eric Meyer-Reset verwenden, so bilden Elemente sind relativ sauber von Überschreibungen. Wir freuen uns auf irgendwelche Tipps oder Tricks, die Sie zu bieten haben!

War es hilfreich?

Lösung

Nach mehr als eine Stunde von Zwicken, Testen und versucht, verschiedene Arten von Markup, ich glaube, ich eine anständige Lösung haben kann. Die Anforderungen für dieses Projekt waren:

  1. Eingänge müssen auf ihre eigene Linie sein.
  2. Checkbox Eingänge müssen in ähnlicher Weise vertikal mit dem Etikett Text auszurichten (falls nicht identisch) in allen Browsern.
  3. Wenn das Etikett Text umbrochen, muss es (also keine Verpackung nach unten unterhalb der Checkbox) eingerückt werden.

Bevor ich in jede Erklärung zu bekommen, werde ich Ihnen nur den Code geben: 

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 Ausführungsbeispiel in JSFiddle .

Dieser Code geht davon aus, dass Sie ein Reset wie Eric Meyer verwenden, das nicht Formulareingabe Margen und Polsterung (daher setzen margin und padding setzt im Eingang CSS) nicht außer Kraft setzen. Offensichtlich in einer Live-Umgebung werden Sie wahrscheinlich seine Verschachtelung / stuff zwingende 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-Eigenschaft Hack). Sowohl IE 6 und 7 wird es bemerken, aber Safari und Firefox wird es richtig ignorieren. Ich denke, es könnte gültiges CSS sein, aber du bist immer noch besser dran mit Conditional Comments; nur verwendet es für Einfachheit.
  • Wie man am besten ich sagen kann, ist die einzige vertical-align Aussage, die in allen Browsern konsistent war, war vertical-align: bottom. Wenn Sie diese Option und dann relativ Positionierung nach oben verhielten sich fast identisch in Safari, Firefox und IE mit nur einem Pixel oder zwei Diskrepanz.
  • Das Hauptproblem bei Ausrichtung in Arbeit ist, dass der IE ein paar geheimnisvollen Raum um Eingabeelemente klebt. Es ist nicht Polsterung oder Rand, und es ist verdammt hartnäckig. eine Breite und Höhe auf die Checkbox einstellen und dann aus irgendeinem Grund schneidet den zusätzlichen Platz overflow: hidden und ermöglicht IE Positionierung sehr ähnlich wie Safari und Firefox zu handeln.
  • Je nach Textanpassung, werden Sie ohne Zweifel benötigen die relative Positionierung, Breite, Höhe einstellen und so weiter Dinge suchen richtig zu machen.

Hope dies jemand anderes hilft! Ich habe nicht diese spezielle Technik, die auf irgendwelchen Projekten andere als die versuche ich war an diesem Morgen arbeiten, also auf jeden Fall Rohr, wenn Sie etwas finden, das mehr konsequent arbeitet.

Andere Tipps

Manchmal vertical-align benötigt zwei Inline (Span, Etikett, Eingang, etc ...) Elemente nebeneinander richtig zu arbeiten. Die folgenden Kontrollkästchen sind in IE, Safari, FF richtig vertikal zentriert und Chrome, auch wenn die Textgröße sehr klein oder groß ist.

Sie sind alle nebeneinander auf der gleichen Linie schwimmen, aber die nowrap bedeutet, dass die gesamte Etikettentext immer neben dem Kontrollkästchen bleibt.

Der Nachteil ist, die zusätzlichen sinnlosen 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 hatte, dass erforderlich wickeln, ohne unter der Checkbox Umwickeln Sie Polsterung und negative Texteinrückung auf die Kennzeichnungselemente verwenden würde: 

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

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

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

Renders Pixel-für-Pixel das gleiche in Safari (deren Grundlinie Ich vertraue) und sowohl Firefox und IE7 überprüfen, wie gut. Es funktioniert auch für verschiedene Etikettenschriftgrößen, groß und klein. Nun, für IE-Basislinie auf wählt und Eingänge zur Festsetzung ...

Update: (Third-Party-Edit)

Die richtige bottom Position hängt von font-family und font-size! Ich fand mit bottom: .08em; für Kontrollkästchen und Radio-Elemente ist ein guter allgemeiner Wert. Getestet habe ich es in Chrom / Firefox / IE11 in Windows mit Arial & Calibri Schriftarten mehrere kleine / mittlere / große Schriftgrößen verwendet wird. 

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

Eine einfache Sache, die gut zu funktionieren scheint, ist eine um die vertikale Position der Checkbox mit vertical-align einstellen anzuwenden. Es wird nach wie vor in allen Browsern sein variieren, aber die Lösung ist unkompliziert. 

input {
    vertical-align: -2px;
}

Referenz

try vertical-align: middle

auch Ihr Code scheint, wie es sein sollte: 

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

meine Lösung Versuchen Sie, versuchte ich es in IE 6, FF2 und Chrome und es macht Pixel für Pixel in allen drei Browsern. 

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

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

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

Getestet heute in Chrome, Firefox, Opera, IE 7 und 8. Beispiel: Fiddle

Normalerweise verwende ich Zeilenhöhe, um die vertikale Position meines statischen Text 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.

Ich habe nicht ganz meine Lösung getestet, aber es scheint sehr gut zu funktionieren.

Meine HTML ist einfach: 

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

ich dann alle Kontrollkästchen Set für Höhe und Breite 24px. Um den Text zu machen ausgerichtet I des Labels line-height auch machen 24px und weisen vertical-align: top; etwa so:

EDIT: Nach IE Test vertical-align: bottom; an den Eingang I hinzugefügt und verändert die CSS des Labels. Sie finden können Sie einen bedingten IE CSS Fall müssen padding aussortieren -. Aber der Text und Feld sind 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, bitte lassen Sie mich freundlich wissen. Hier ist es in Aktion (in Chrome und IE - Entschuldigungen als Screenshots auf Retina und mit Parallele zum IE genommen wurden):

Screenshot von Kontrollkästchen: Chrome Screenshot von Kontrollkästchen: IE

Ich denke, das ist der einfachste Weg, 

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

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>

Ich weiß nicht, wie die relative Positionierung, weil es Element über alles andere auf seiner Ebene gerendert macht (es oben auf etwas bekommen können, wenn Sie komplexe Layout).

Ich habe entdeckt, dass vertical-align: sub Kontrollkästchen genug ausgerichtet in Chrome, Firefox und Opera gut aussehen lässt. Kann nicht Safari überprüfen, da ich MacOS und IE10 nicht habe etwas weg, aber ich gefunden habe es für mich gut genug, um Lösung zu sein.

Eine andere Lösung könnte sein, zu versuchen und spezifische CSS für jeden Browser und Feinabstimmung es mit einigen vertical-align in% / Pixel / EMs zu machen: http://css-tricks.com/snippets/css/browser-specific-hacks/

Nun, da Flexbox in allen modernen Browsern unterstützt wird, so etwas wie dies scheint wie ein einfacher Ansatz für mich. 

<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 komplette Präfix Version Demo: 

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>

Ich hatte noch nie ein Problem mit ihm, wie dies zu tun: 

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

Ich wollte nur auf die Diskussion über die ‚für‘ Attribut auf Etiketten hinzufügen (etwas offtopic):

Bitte verwenden Sie liefern es, auch wenn es nicht notwendig ist, weil es so sehr bequem ist von Javascript zu verwenden: 

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

Das ist viel bequemer als zu versuchen, herauszufinden, wheter das Etikett den Eingang eingenistet hat oder wheter die Eingabe vor dem Etikett oder nach .. etc. Und es schadet nie, es zu liefern .. so.

Just my 2 cents.

Wenn Sie ASP.NET Web Forms Sie brauchen sich nicht um DIVs und andere Elemente oder feste Größen zu sorgen. Wir können den <asp:CheckBoxList> Text ausrichten, indem float:left zum CheckBoxList Eingabetyp in CSS setzen.

Überprüfen Sie bitte 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>

Die gewählte Antwort mit 400+ upvotes nicht für mich in Chrome 28 OSX zu arbeiten, wahrscheinlich, weil es nicht in OSX getestet wurde oder dass es funktioniert in was auch immer um im Jahr 2008 war, wenn diese Frage beantwortet wurde.

Die Zeiten haben sich geändert, und neue CSS3-Lösungen sind jetzt möglich. Meine Lösung verwendet Pseudoelemente eine benutzerdefinierte Checkbox zu erstellen. So die Vorgaben (Vor- oder Nachteile, aber man es betrachtet) sind wie folgt:

  • Funktioniert nur in modernen Browsern (FF3.6 +, IE9 +, Chrome, Safari)
  • Beruht auf einer speziell entworfenen Checkbox, die genau in jedem Browser / OS die gleiche gerendert wird. Hier habe ich nur ein paar einfache Farben gewählt, aber man kann immer lineare Verläufe hinzufügen und so ihm zu geben, mehr von einem Knall.
  • Ist auf eine bestimmte Schriftart / Schriftgröße ausgerichtet, die, wenn geändert, dann würden Sie einfach die Positionierung und Größe der Checkbox ändern, um sie vertikal ausgerichtet erscheinen zu lassen. Wenn es richtig gezwickt, sollte das Endergebnis in der Nähe sein, immer noch genau das gleiche in allen Browser / Betriebssystemen.
  • Keine vertikalen Ausrichtungseigenschaften, kein Schwimmer
  • Müssen Sie das mitgelieferte Markup in meinem Beispiel verwendet, wird es nicht, wenn wie die Frage strukturiert arbeiten, jedoch sieht das Layout wird im Wesentlichen gleich. Wenn Sie wollen die Dinge bewegen, müssen Sie auch die zugehörige CSS bewegen

Ihre HTML: 

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

Ihre 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 sich das Kontrollkästchen und fügt hinzu und Stile Pseudoelemente auf dem Etikett das sichtbare Kontrollkästchen zu erstellen. Da das Etikett auf die versteckte Checkbox gebunden ist, wird das Eingabefeld noch aktualisiert werden und der Wert wird mit dem Formular eingereicht werden.

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

Und wenn Sie daran interessiert sind, hier ist mein nehmen auf Radio-Buttons: http://jsfiddle.net/DtKrV / 2 /

Hope jemand findet diese nützlich!

Wenn Sie Twitter Bootstrap verwenden, können Sie nur die checkbox Klasse auf dem <label> verwenden: 

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

codieren die Höhe des Kontrollkästchen und Breite, entfernen ihre Polsterung, und stellen seine Höhe plus vertikalen Ränder in Höhe der Zeilenhöhe des Labels. Wenn das Etikett Text inline ist, schweben Sie das Kontrollkästchen. Firefox, Chrome und IE7 + alle machen das folgende Beispiel identisch: http://www.kornea.com/ CSS-Checkbox-align 

<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 ist, vertical-align zu verwenden, nur in Tabellenzellen oder inline-block, wenn Label-Tag.

Mit einem Eingangstyp Checkbox innerhalb des Etiketts eingewickelt und schwebte nach links wie folgt: 

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

Dies ist für mich: 

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, der die Höhe der Linie Höhe des (Blockebene) identisch ist. 

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

Lassen Sie uns endlich einen Blick auf die Quelle des Problems nehmen

Die Kontrollkästchen gemacht werden unter Verwendung der Bilder (eine benutzerdefinierte diejenigen via CSS gesetzt werden). Hier ist eine (nicht markiert) Checkbox in FireFox, mit DOM-Inspektoren hervorgehoben:

Und hier ist die gleiche unstyled Checkbox in Chrome:

Sie können den Rand (orange) sehen; Polsterung nicht vorhanden ist (wäre gezeigt grün). Also, was ist diese pseudo-Marge auf der rechten und auf der Unterseite der Checkbox? Dies sind Teile des Bildes für das Kontrollkästchen verwendet . Deshalb verwendet nur nicht vertical-align: middle nicht wirklich ausreichend, und das ist die Quelle für die Cross-Browser-Probleme.

Was können wir dagegen tun?

Eine offensichtliche Option ist - die Bilder ersetzen! Glücklicherweise kann man dies über CSS tun und solche mit externen Bildern, base64 (in-CSS) Bilder, in-CSS SVG oder nur Pseudo-Elemente ersetzen. Es ist eine robuste (Cross-Browser!) Ansatz, und hier ist ein Beispiel für eine solche Einstellung gestohlen von diese Frage : 

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

Sie können einige tiefergehende Artikel über solche Styling wie manche hier lesen; es ist außerhalb des Geltungsbereichs dieser Antwort.

Ok, noch was nicht-custom-Bilder-oder-Pseudo-Elemente-Lösung?

TL; DR: sieht aus wie das wird nicht funktionieren, benutzerdefinierte Option verwenden, anstatt

Lassen Sie uns zunächst feststellen, dass, wenn in anderen Browsern diese pseudo-Margen innerhalb Checkbox Symbol willkürlich waren, gibt es keine einheitliche Lösung waren. Zum Aufbau eines müssen wir die Anatomie solcher Bilder in bestehenden Browsern erkunden.

Also, welcher Browser tun, um die pseudo-Margen im Kontrollkästchen hat? Ich habe Chrome 75, Vivaldi 2.5 (Chrombasis), FireFox 54 ausgecheckt (nicht fragen, warum so veraltet), IE 11, Rand 42, Safari ?? (Geliehene für eine Minute, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi hat eine solche pseudo-Margen (ich vermute, alle Chromium-basierten Browsern als auch, wie Opera).

Was ist die Größe dieser pseudo-Margen? Um dies herauszufinden kann man eine gezoomt Checkbox: 

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.0px in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: versuchen verschiedene Werte von zoom für das Kontrollkästchen. In meinen Tests sowohl in Chrome und Vivaldi die relative Größe des pseudo-Marge ist sehr unterschiedlich bei zoom Werten 10, 20 und bei Werten von 11 bis 19 (??):

während für zoom = 11 ist es fast doppelt so hoch wie Wert

scale scheint zu sein, konsistentere: 

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

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

Jetzt, da wir wissen (?) Die Größe der pseudo-Marge wollen wir beachten Sie, das ist nicht genug. sind ter Größen der Checkbox Symbole die gleichen für alle Browser? Ach! Hier ist, was DOM-Inspektor für unstyled Kontrollkästchen zeigt:

  • FireFox: 13.3px
  • Chromium-basierte: 12.8px für das Ganze, also 12,8 (100% - 14%) = 11px für das, was als Checkbox visuell wahrgenommen
  • IE 11, Rand: 13px
  • Safari: n / a (diese auf dem gleichen Bildschirm verglichen werden soll, glaube ich)

Nun, bevor wir irgendwelche Lösungen oder Tricks zu diskutieren, lassen Sie uns fragen: Was ist ein richtig Ausrichtung? Was wollen wir erreichen? Zu bestimmten Punkt ist es eine Frage des Geschmacks, aber im Grunde kann ich denke an die folgenden „nett“ Alignments' Aspekte:

Text und Checkbox auf der gleichen Grundlinie (die ich hier absichtlich nicht verstellen Checkbox Größe):

oder haben die gleiche Mittellinie in Bezug auf Kleinbuchstaben:

oder gleiche Mittellinie in Bezug auf den Großbuchstaben (es ist einfacher, den Unterschied für andere Schriftgröße zu sehen):

und auch müssen wir entscheiden, ob die Größe der Checkbox sollte auf die Höhe eines Kleinbuchstaben, einen Großbuchstaben oder etwas anderes (größer, kleiner oder zwischen Klein- und Kapital) gleich sein.

Für diese Diskussion wollen wir eine Ausrichtung schön nennen, wenn das Kontrollkästchen auf der gleichen Grundlinie wie der Text und hat die Größe eines Großbuchstaben (ein hoch arguable Wahl):

Nun, was Werkzeuge tun wir müssen:

  1. einstellen Checkbox Größe
  2. erkennen Chrom mit seiner pseudo-margined Checkbox, und spezifische Arten
  3. einstellen Checkbox / label vertikale Ausrichtung

  1. Im Hinblick auf die Checkbox Größenanpassung : Es gibt width, height, size, zoom, scale (habe ich etwas verpasst?). zoom und scale erlauben keine absolute Größe zu setzen, so dass sie nur helfen, mit der Anpassung Größe in Text, nicht gesetzt Cross-Browser-Größe (es sei denn, wir browserspezifischen Regeln schreiben können). size mit Chrome funktioniert nicht (habe es mit alten IE arbeiten? wie auch immer, es ist nicht so interessant). width und height Arbeit in Chrome und anderen Browsern, so können wir eine gemeinsame Größe, setzen aber auch hier in Chrome setzt er die Größe des gesamten Bildes, nicht das Kontrollkästchen selbst. . Hinweis: es minimal ist (Breite, Höhe), die eine Größe des Ankreuzfeld definiert (falls Breite ≠ Höhe, wird der Bereich außerhalb Ankreuzfeld square hinzugefügt „pseudo-margin“)

    Eine unglückliche Sache ist, werden die pseudo-Margen in Chrome Checkbox auf Null für jede Breite und Höhe nicht festgelegt, soweit ich sehen kann.

  2. Ich fürchte, es gibt keine zuverlässige CSS-only-Methode diese Tage.

  3. Lassen Sie uns die vertikale Ausrichtung betrachten. vertical-align kann nicht konsistente Ergebnisse geben, wenn auf middle oder baseline wegen des Chrome pseudo-Marge, die einzige wirkliche Möglichkeit, das gleiche zu bekommen „Koordinatensystem“ für alle Browser ist Etiketten- und Eingabe in den top auszurichten:

    comparing vertical-align: top und bottom

    (auf dem Bild: vertical-align: oben, unten und unten ohne schachtel shadow)

Also, was 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 Snippet oben arbeitet mit Chrom (Chrom-basierten Browsern), aber anderer Browser erfordert eine kleinere Größe der Checkbox. Es scheint unmöglich zu sein, sowohl die Größe und vertikale Ausrichtung in einer Art und Weise anzupassen, die sich um Chromium Checkbox Bild Marotte funktioniert. Mein letzter Vorschlag ist: individuelle Kontrollkästchen verwenden, anstatt - und Sie werden Frustration vermeiden:)

Ich lasse in der Regel eine Checkbox nicht markiert und dann seine „label“ ein separates Element machen. Es ist ein Schmerz, aber es gibt so viel Cross-Browser-Unterschied zwischen dem, wie Checkboxen und ihre Etiketten angezeigt werden (wie Sie vielleicht bemerkt haben), dass dies der einzige Weg ist, kann ich nahe kommen Steuern, wie alles aussieht.

ich am Ende auch diese Entwicklung in winforms tun, aus dem gleichen Grunde. Ich denke, dass das grundlegende Problem mit der Checkbox Steuerung ist, dass es wirklich zwei verschiedene Kontrollen: die Box und das Etikett. Durch die Verwendung einer Checkbox, werden Sie es verlassen zu den Implementierer der Kontrolle zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie immer es falsch, wo falsch = nicht, was Sie wollen).

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

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 wird Listenelemente in threecols platzieren und nur Breiten ändern anpassen.

Im Folgenden wird pixelgenaue Konsistenz in allen Browsern, auch IE9:

Der Ansatz ist durchaus sinnvoll, bis zu dem Punkt des Seins der Hand:

  1. Erstellen Sie einen Eingang und ein Etikett.
  2. Anzeige sie als Block, so dass Sie sie schweben, wie Sie möchten.
  3. Stellen Sie die Höhe und die Zeilenhöhe auf den gleichen Wert, den sie zentriert und vertikal ausrichten zu gewährleisten.
  4. em Messungen, um die Höhe der Elemente zu berechnen, muss der Browser die Höhe der Schriftart für diese Elemente kennen, und es muss nicht selbst in gesetzt werden em Messungen.

Dies führt zu einer weltweit gültigen Regel: 

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

Mit Schriftgröße anpassbar pro Form, Fieldset oder Element. 

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

Geprüft neueste Chrome, Safari und Firefox auf Mac, Windows, iPhone und Android. Und IE9.

Diese Methode ist wahrscheinlich für alle Eingabetypen, die nicht höher ist als eine Textzeile sind. Tragen Sie eine Art Regel zu entsprechen.

So weiß ich, das viele Male beantwortet wurde, aber ich glaube, ich habe einen Weg elegantere Lösung als jene, die bereits zur Verfügung gestellt wurden. Und nicht nur 1 elegante Lösung, aber 2 separate Lösungen, um Ihre Phantasie kitzeln. Mit dieser sagte, müssen Sie alles wissen und sehen in 2 JS Fiddle die enthalten sind, mit Kommentaren.

Lösung 1 stützt sich auf die native „Checkbox“ des gegebenen Browser, wenn auch mit einem Twist ... Sein in einem div enthalten sind, die Cross-Browser zu positionieren einfacher ist, mit einem Überlauf: versteckt, die über ein hacken 1px gestreckt Checkbox (dies ist so kippen Sie die hässlichen Grenzen von FF sehen)

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

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

Lösung # 2 verwendet die „Checkbox Toggle Hack“, um den CSS-Zustand eines DIV zu wechseln, die über Browser richtig positioniert ist, und das Setup mit einem einfachen Sprite für die Checkbox deaktiviert und aktiviert Zustände. Alles, was benötigt wird, ist die Hintergrundposition einzustellen mit dem Kästchen zum Ankreuzen Toggle Hack. Dies ist meiner Meinung nach, ist die elegantere Lösung, wie Sie mehr Kontrolle über Ihre Checkboxen und Radiosender haben und garantieren, können sie das gleiche über Browser aussehen.

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

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

Wenn jemand die nicht einverstanden sind mit diesen Methoden, bitte ich um einen Kommentar abzugeben, würde ich gerne ein Feedback zu hören, warum andere haben über diese Lösungen nicht kommen, oder wenn sie, warum sehe ich hier keine Antworten sie in Bezug auf? Wenn jemand eine dieser Methoden sieht scheitern, wäre es schön, dass auch zu sehen, aber diese sind in den neuesten Browsern und setzt auf HTML / CSS-Methoden, die sehr alt sind und universell, soweit ich gesehen habe getestet.

Yay Dank! Auch dies hat mich verrückt für immer.

In meinem speziellen Fall, das ist für mich gearbeitet: 

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 bin mit dem reset.css, das einige der Unterschiede erklären könnte, aber dies scheint für mich gut zu funktionieren.

position: relative; hat einige Probleme im IE mit z-index und Animationen wie jQuery 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 zwickt abhängig von der Schriftgröße in <label> verwendet

PS:
Ich benutze ie7js die CSS Arbeit in IE6 zu machen.

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

Fiddle

HTML-Code: 

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

CSS-Code: 

.checkboxes input {
    vertical-align: sub;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top