Dies ist eines der kleineren CSS-Probleme, das mich ständig plagt. Wie richten Leute um Stack Overflow vertikalcheckboxes
und ihrelabels
konsistent 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!
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:
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:
*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.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.overflow: hidden
wird aus irgendeinem Grund der zusätzliche Platz abgeschnitten und die Positionierung des IE kann sehr ähnlich zu Safari und Firefox sein.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.
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>
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>
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;
}
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>
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>
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
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.
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):
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>
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>
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/
Ich hatte noch nie ein Problem damit:
<form>
<div>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
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:
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!
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.
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>
<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.
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:
Und hier ist das gleiche nicht gestaltete Kontrollkästchen in Chrome:
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.
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.
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:
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:
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):
oder haben die gleiche Mittellinie in Kleinbuchstaben:
oder die gleiche Mittellinie in Großbuchstaben (es ist einfacher, den Unterschied für verschiedene Schriftgrößen zu erkennen):
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):
Nun, welche Werkzeuge müssen wir haben:
?
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.
Ich fürchte, es gibt heutzutage keine verlässliche Nur-CSS-Methode .
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. :
(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:)
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
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>
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.
input[type=checkbox]
{
vertical-align: middle;
}
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>
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.
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.
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.
Folgendes gibt pixelgenaue Konsistenz für alle Browser, auch für IE9:
Die Annäherung ist ziemlich vernünftig, bis sie offensichtlich ist:
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.
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.
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.
<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.
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
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.
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+
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;
}