Come allineare le caselle di controllo e le loro etichette in modo coerente su più browser

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

Domanda

Questo è uno dei problemi CSS minori che mi affligge costantemente. In che modo le persone intorno a Stack Overflow allineano verticalmente checkboxes e i loro labels coerentemente cross- del browser ? Ogni volta che li allineo correttamente in Safari (di solito usando vertical-align: baseline su input), sono completamente spenti in Firefox e IE. Risolvilo in Firefox e Safari e IE sono inevitabilmente incasinati. Perdo tempo ogni volta che scrivo un modulo.

Ecco il codice standard con cui lavoro: 

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

Di solito uso il ripristino di Eric Meyer, quindi gli elementi del modulo sono relativamente puliti dalle sostituzioni. In attesa di suggerimenti o trucchi che hai da offrire!

È stato utile?

Soluzione

Dopo oltre un'ora di messa a punto, test e diversi stili di markup, penso di poter avere una soluzione decente. I requisiti per questo particolare progetto erano:

  1. Gli input devono essere sulla propria riga.
  2. Gli input della casella di controllo devono essere allineati verticalmente con il testo dell'etichetta in modo simile (se non identico) su tutti i browser.
  3. Se il testo dell'etichetta termina, deve essere rientrato (quindi non scorrere sotto la casella di controllo).

Prima di entrare in qualsiasi spiegazione, ti darò solo il codice: 

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>

Ecco l'esempio di lavoro in JSFiddle .

Questo codice presuppone che tu stia utilizzando un reset come Eric Meyer che non sovrascrive i margini di input e il padding (quindi inserendo i reset di margin e padding nel CSS di input). Ovviamente in un ambiente live probabilmente anniderai / sovrascriverai cose per supportare altri elementi di input, ma volevo mantenere le cose semplici.

Cose da notare:

  • La dichiarazione *overflow è un hack IE inline (l'hack di proprietà stellare). Sia IE 6 che 7 lo noteranno, ma Safari e Firefox lo ignoreranno correttamente. Penso che potrebbe essere un CSS valido, ma stai ancora meglio con i commenti condizionali; l'ho usato solo per semplicità.
  • Come posso dire, l'unica vertical-align affermazione coerente tra i browser era vertical-align: bottom. L'impostazione di questo e il relativo posizionamento verso l'alto si sono comportati in modo quasi identico in Safari, Firefox e IE con solo un pixel o due di discrepanza.
  • Il problema principale nel lavorare con l'allineamento è che IE attacca un mucchio di spazio misterioso attorno agli elementi di input. Non è imbottitura o margine ed è dannatamente persistente. L'impostazione di una larghezza e altezza sulla casella di controllo e quindi overflow: hidden per qualche motivo taglia lo spazio extra e consente al posizionamento di IE di agire in modo molto simile a Safari e Firefox.
  • A seconda delle dimensioni del testo, senza dubbio dovrai regolare il posizionamento, la larghezza, l'altezza e così via per far apparire le cose nel modo giusto.

Spero che questo aiuti qualcun altro! Non ho provato questa tecnica specifica su nessun progetto diverso da quello su cui stavo lavorando stamattina, quindi sicuramente fai un salto se trovi qualcosa che funziona in modo più coerente.

Altri suggerimenti

A volte l'allineamento verticale necessita di due elementi in linea (span, label, input, ecc ...) uno accanto all'altro per funzionare correttamente. Le seguenti caselle di controllo sono correttamente centrate verticalmente in IE, Safari, FF e Chrome, anche se la dimensione del testo è molto piccola o grande.

Galleggiano tutti uno accanto all'altro sulla stessa linea, ma il nowrap significa che l'intero testo dell'etichetta rimane sempre accanto alla casella di controllo.

Il rovescio della medaglia sono i tag SPAN senza significato extra. 

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

Ora, se avessi un testo di etichetta molto lungo che necessitava di da racchiudere senza avvolgere sotto la casella di controllo, avresti usato il riempimento e il rientro del testo negativo sugli elementi dell'etichetta: 

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

Lavorando su Una soluzione di Crayon , ho qualcosa che funziona per me ed è più semplice: 

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

Esegue il rendering pixel per pixel lo stesso in Safari (di cui mi fido baseline) e sia Firefox che IE7 vanno bene. Funziona anche con varie dimensioni di caratteri per etichette, grandi e piccole. Ora, per fissare la linea di base di IE su selezioni e input ...

Aggiornamento: (Modifica di terze parti)

La posizione bottom corretta dipende dalla famiglia e dalla dimensione del carattere! Ho trovato usando bottom: .08em; per la casella di controllo & Amp; gli elementi radio hanno un buon valore generale. L'ho testato in Chrome / Firefox / IE11 in Windows con amplificatore Arial &; Caratteri Calibri che utilizzano diverse dimensioni di caratteri piccoli / medi / grandi. 

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

Una cosa semplice che sembra funzionare bene è applicare una regolazione della posizione verticale della casella con allineamento verticale. Continuerà a variare tra i browser, ma la soluzione è semplice. 

input {
    vertical-align: -2px;
}

Riferimento

prova vertical-align: middle

anche il tuo codice sembra che dovrebbe essere: 

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

Prova la mia soluzione, l'ho provata in IE 6, FF2 e Chrome e rende pixel per pixel in tutti e tre i browser. 

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

L'unica soluzione perfettamente funzionante per me è: 

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

Testato oggi su Chrome, Firefox, Opera, IE 7 e 8. Esempio: Fiddle

Di solito uso l'altezza della linea per regolare la posizione verticale del mio testo statico: 

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>

Spero che sia d'aiuto.

Non ho completamente testato la mia soluzione, ma sembra funzionare alla grande.

Il mio HTML è semplicemente: 

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

Ho quindi impostato tutte le caselle di controllo su 24px sia in altezza che in larghezza. Per allineare il testo, rendo anche line-height l'etichetta vertical-align: top; e assegno vertical-align: bottom; in questo modo:

MODIFICA: Dopo il test IE ho aggiunto <=> all'input e modificato il CSS dell'etichetta. Potresti scoprire che hai bisogno di un caso IE css condizionale per risolvere il riempimento, ma il testo e la casella sono in linea. 

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

Se qualcuno scopre che non funziona, per favore fatemi sapere. Eccolo in azione (in Chrome e IE - ci scusiamo perché sono stati presi screenshot sulla retina e usando paralleli per IE):

screenshot delle caselle di controllo: Chrome screenshot delle caselle di controllo: IE

Penso che questo sia il modo più semplice 

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

Questo funziona bene per me: 

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>

Non mi piace il posizionamento relativo perché rende l'elemento reso sopra ogni altra cosa al suo livello (può avere qualcosa in più se hai un layout complesso).

Ho scoperto che vertical-align: sub rende le caselle di controllo abbastanza allineate in Chrome, Firefox e Opera. Non riesco a controllare Safari poiché non ho MacOS e IE10 è leggermente spento, ma ho trovato che è una soluzione abbastanza buona per me.

Un'altra soluzione potrebbe essere quella di provare a creare CSS specifici per ogni browser e perfezionarli con un po 'di allineamento verticale in% / pixel / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Ora che flexbox è supportato in tutti i browser moderni, qualcosa del genere sembra un approccio più semplice per me. 

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


Ecco la demo completa della versione con prefisso: 

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>

Non ho mai avuto problemi a farlo in questo modo: 

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

Volevo solo aggiungere alla discussione sull'attributo 'for' sulle etichette (leggermente offtopico):

Forniscilo, anche quando non è necessario, perché è molto comodo da usare da JavaScript: 

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

È molto più conveniente che cercare di capire se l'etichetta ha l'input nidificato, o se l'input è prima dell'etichetta, o dopo ... ecc. E non fa mai male fornirlo .. così.

Solo i miei 2 centesimi.

Se usi Moduli Web ASP.NET non devi preoccuparti di DIV e altri elementi o dimensioni fisse. Possiamo allineare il <asp:CheckBoxList> testo impostando float:left sul tipo di input CheckboxList in CSS.

Controlla il seguente codice di esempio: 

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Codice .ASPX: 

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

La risposta scelta con oltre 400 voti non ha funzionato per me in Chrome 28 OSX, probabilmente perché non è stata testata in OSX o ha funzionato in qualsiasi cosa fosse nel 2008 quando è stata data risposta a questa domanda.

I tempi sono cambiati e ora sono possibili nuove soluzioni CSS3. La mia soluzione utilizza pseudoelementi per creare una casella di controllo personalizzata . Quindi le clausole (pro o contro, comunque tu lo guardi) sono le seguenti:

  • Funziona solo con browser moderni (FF3.6 +, IE9 +, Chrome, Safari)
  • Si basa su una casella di controllo progettata su misura, che sarà resa esattamente la stessa in ogni browser / sistema operativo. Qui ho appena scelto alcuni colori semplici, ma puoi sempre aggiungere gradienti lineari e simili per dargli più botto.
  • È adattato a una determinata dimensione di carattere / carattere, che se modificata cambia semplicemente il posizionamento e la dimensione della casella di controllo per farla apparire allineata verticalmente. Se ottimizzato correttamente, il risultato finale dovrebbe essere quasi identico in tutti i browser / sistemi operativi.
  • Nessuna proprietà di allineamento verticale, nessun float
  • Devo usare il markup fornito nel mio esempio, non funzionerà se strutturato come la domanda, tuttavia il layout avrà essenzialmente lo stesso aspetto. Se vuoi spostare le cose, dovrai anche spostare il CSS associato

Il tuo HTML: 

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

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

Questa soluzione nasconde la casella di controllo e aggiunge e modella gli pseudoelementi all'etichetta per creare la casella di controllo visibile. Poiché l'etichetta è legata alla casella di controllo nascosta, il campo di input verrà comunque aggiornato e il valore verrà inviato con il modulo.

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

E se sei interessato, ecco la mia opinione sui pulsanti di opzione: http://jsfiddle.net/DtKrV / 2 /

Spero che qualcuno lo trovi utile!

Se usi Twitter Bootstrap, puoi semplicemente usare la classe checkbox su <label>: 

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

Hardcode l'altezza e la larghezza della casella di controllo, rimuovere la sua imbottitura e rendere la sua altezza più i margini verticali pari all'altezza della linea dell'etichetta. Se il testo dell'etichetta è in linea, deseleziona la casella di controllo. Firefox, Chrome e IE7 + visualizzano tutti in modo identico il seguente esempio: http://www.kornea.com/ css-casella-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>

Il trucco è usare l'allineamento verticale solo nelle celle della tabella o il blocco inline se si usa il tag label.

Con una casella di controllo del tipo di input racchiusa nell'etichetta e spostata a sinistra in questo modo: 

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

questo ha funzionato per me: 

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

Assicurati che l'altezza di sia identica all'altezza della linea (blocklevel). 

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

Diamo finalmente un'occhiata alla fonte del problema

Le caselle di controllo sono visualizzate usando le immagini (si possono impostare quelle personalizzate tramite CSS). Ecco una casella (non selezionata) in FireFox, evidenziata con l'ispettore DOM:

è solo un quadrato

Ed ecco la stessa casella di controllo non modificata in Chrome:

it & # 39; s un quadrato non centrato con" margini "a destra e in basso

Puoi vedere il margine (arancione); l'imbottitura non è presente (sarebbe mostrata in verde). Cos'è questo pseudo-margine a destra e in fondo alla casella di controllo? Queste sono parti dell'immagine utilizzata per la casella di controllo . Ecco perché usare solo vertical-align: middle non è sufficiente e questa è la fonte dei problemi tra browser.

Quindi cosa possiamo fare al riguardo?

Un'opzione ovvia è & # 8211; sostituisci le immagini! Fortunatamente, è possibile farlo tramite CSS e sostituire quelli con immagini esterne, immagini base64 (in-CSS), svg in-CSS o semplicemente pseudo-elementi. È un approccio solido (cross-browser!), Ed ecco un esempio di tale aggiustamento rubato da questa domanda : 

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

Potresti voler leggere alcuni articoli più approfonditi su questo stile come alcuni qui ; è fuori dalla portata di questa risposta.

Ok, cosa ne pensi della soluzione no-custom-images-or-pseudo-elements?

TL; DR: sembra che non funzionerà, usa invece la casella di controllo personalizzata

Innanzitutto, notiamo che se in altri browser quelle pseudo-margini all'interno dell'icona della casella di controllo fossero arbitrarie, non ci sarebbe soluzione coerente. Per costruirne una, dobbiamo esplorare l'anatomia di tali immagini nei browser esistenti.

Quindi quali browser hanno gli pseudo-margini nelle caselle di controllo? Ho verificato Chrome 75, Vivaldi 2.5 (basato su Chromium), FireFox 54 (non chiedermi perché non è aggiornato), IE 11, Edge 42, Safari ?? (preso in prestito uno per un minuto, ho dimenticato di controllare la versione). Solo Chrome e Vivaldi hanno tali pseudo-margini (sospetto che anche tutti i browser basati su Chromium, come Opera).

Qual è la dimensione di quegli pseudo-margini? Per capirlo è possibile utilizzare una casella di controllo ingrandita: 

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

il mio risultato è ~ 7% di larghezza / altezza e quindi 0,9-1,0px in unità assolute. L'accuratezza può essere messa in discussione, tuttavia: prova diversi valori di zoom per la casella di controllo. Nei miei test sia su Chrome che su Vivaldi la dimensione relativa dello pseudo-margine è molto diversa a scale valori 10, 20 e valori 11-19 (??):

per zoom = 10 è 7% while for zoom = 11 è quasi il doppio di quel valore

width sembra essere più coerente: 

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}
input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

quindi probabilmente ~ 14% e 2px sono i valori corretti.

Ora che conosciamo (?) la dimensione dello pseudo-margine, notiamo che questo non è abbastanza. Le dimensioni delle icone della casella di controllo sono le stesse per tutti i browser? Ahimè! Ecco cosa mostra l'ispettore DOM per le caselle di controllo non stilate:

  • FireFbue: 13.3px
  • A base di cromo: 12,8 px per l'intera cosa, quindi 12,8 (100% - 14%) = 11 px per ciò che è visivamente percepito come casella di controllo
  • IE 11, Edge: 13px
  • Safari: n / a (questi dovrebbero essere confrontati sullo stesso schermo, credo)

Ora, prima di discutere qualsiasi soluzione o trucco, chiediamoci: cos'è un allineamento corretto ? Cosa stiamo cercando di ottenere? A un certo punto è una questione di gusti, ma fondamentalmente posso pensare al seguente & Quot; nice & Quot; aspetti degli allineamenti:

testo e casella di controllo sulla stessa linea di base (non modifico deliberatamente le dimensioni della casella di controllo qui):

inserisci qui la descrizione dell'immagine

o hanno la stessa linea mediana in termini di lettere minuscole:

inserisci qui la descrizione dell'immagine

o stessa linea mediana in termini di lettere maiuscole (è più facile vedere la differenza per le diverse dimensioni del carattere):

inserisci qui la descrizione dell'immagine

e dobbiamo anche decidere se la dimensione della casella di controllo deve essere uguale all'altezza di una lettera minuscola, una lettera maiuscola o qualcos'altro (più grande, più piccolo o tra lettere minuscole e maiuscole).

Per questa discussione chiamiamo un allineamento piacevole se la casella di controllo è sulla stessa linea di base del testo e ha le dimensioni di una lettera maiuscola (una scelta altamente discutibile):

inserisci qui la descrizione dell'immagine

Ora quali strumenti dobbiamo:

  1. regola le dimensioni della casella di controllo
  2. riconosce Chromium con la sua casella di controllo pseudo-marginata e imposta stili specifici
  3. regola la casella di controllo / etichetta allineamento verticale

  1. Per quanto riguarda regolazione delle dimensioni della casella di controllo : ci sono height, size, vertical-align, middle, baseline (ho perso qualcosa?). top e <=> non consentono di impostare le dimensioni assolute, quindi possono essere utili solo per adattarsi alle dimensioni del testo, non alle dimensioni tra browser (a meno che non possiamo scrivere regole specifiche del browser). <=> non funziona con Chrome (ha funzionato con il vecchio IE? comunque, non è così interessante). <=> e <=> funzionano in Chrome e altri browser, quindi possiamo impostare una dimensione comune, ma di nuovo, in Chrome imposta la dimensione dell'intera immagine, non la casella stessa. Nota: è il minimo (larghezza, altezza) che definisce le dimensioni di una casella (se larghezza & # 8800; altezza, l'area esterna al riquadro della casella viene aggiunta a & Quot; pseudo-margine & Quot;).

    Una cosa spiacevole è che la casella di controllo pseudo-margini in Chrome non è impostata su zero per qualsiasi larghezza e altezza, per quanto posso vedere.

  2. Temo non ci siano metodo solo CSS affidabili al giorno d'oggi.

  3. Consideriamo l'allineamento verticale. <=> non può dare risultati coerenti quando impostato su <=> o <=> a causa dello pseudo-margine di Chrome, l'unica vera opzione per ottenere lo stesso " sistema di coordinate " per tutti i browser è allineare l'etichetta e l'input a <=>:

    confrontando vertical-align: top and bottom

    (nella foto: vertical-align: top, bottom and bottom senza box-shadow)

Quindi quale risultato otteniamo da questo? 

<label><input type="checkbox">label</label>
<*>

Il frammento sopra funziona con Chrome (browser basati su Chromium), ma altri browser richiedono una dimensione inferiore della casella di controllo. Sembra impossibile regolare sia le dimensioni sia l'allineamento verticale in modo da aggirare la stranezza dell'immagine della casella di controllo di Chromium. Il mio ultimo suggerimento è: utilizzare invece caselle di controllo personalizzate & # 8211; e eviterai la frustrazione :)

Di solito lascio senza etichetta una casella di controllo e quindi rendo la sua " label " un elemento separato. È una seccatura, ma c'è così tanta differenza tra i browser tra come vengono visualizzate le caselle di controllo e le loro etichette (come hai notato) che questo è l'unico modo in cui posso avvicinarmi a controllare l'aspetto di tutto.

Finisco anche per farlo nello sviluppo di winforms, per lo stesso motivo. Penso che il problema fondamentale con il controllo checkbox sia che si tratta in realtà di due controlli diversi: il box e l'etichetta. Usando una casella di controllo, lo stai lasciando agli implementatori del controllo per decidere come questi due elementi vengono visualizzati uno accanto all'altro (e lo sbagliano sempre, dove errato = non quello che vuoi).

Spero davvero che qualcuno abbia una risposta migliore alla tua domanda.

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>

Il codice sopra inserirà le voci dell'elenco in tre controlli e cambierà semplicemente le larghezze per adattarle.

Quanto segue offre una coerenza dei pixel perfetta tra i browser, anche IE9:

L'approccio è abbastanza sensato, al punto di essere ovvio:

  1. Crea un input e un'etichetta.
  2. Visualizzali come blocchi, in modo da poterli fluttuare come preferisci.
  3. Imposta l'altezza e l'altezza della linea sullo stesso valore per assicurarti che siano centrate e allineate verticalmente.
  4. Per le misurazioni em , per calcolare l'altezza degli elementi, il browser deve conoscere l'altezza del carattere per quegli elementi e non deve essere impostato em misurazioni.

Ciò si traduce in una regola generale applicabile a livello globale: 

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

Con dimensione del carattere adattabile per modulo, fieldset o elemento. 

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

Testato negli ultimi Chrome, Safari e Firefox su Mac, Windows, Iphone e Android. E IE9.

Questo metodo è probabilmente applicabile a tutti i tipi di input che non sono superiori a una riga di testo. Applica una regola di tipo adatta.

Quindi so che è stato risposto molte volte, ma sento di avere una soluzione molto più elegante di quelle che sono già state fornite. E non solo 1 soluzione elegante, ma 2 soluzioni separate per solleticare la tua fantasia. Detto questo, tutto ciò che devi sapere e vedere è contenuto in 2 JS Fiddle's, con commenti.

La soluzione n. 1 si basa sul " nativo; Casella di controllo " del browser dato, anche se con una svolta ... È contenuto in un div che è più facile da posizionare cross-browser, con un overflow: nascosto per tagliare l'eccesso di una casella di controllo allungata di 1px (questo è così non puoi vedere i brutti bordi di FF)

HTML semplice: (segui il link per rivedere i CSS con commenti, il blocco di codice è per soddisfare lo stackoverflow) http://jsfiddle.net/KQghJ/ 

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

La soluzione n. 2 utilizza il " Checkbox Toggle Hack " per attivare / disattivare lo stato CSS di un DIV, che è stato correttamente posizionato sul browser, e configurare con un semplice sprite per gli stati non selezionati e selezionati. Tutto ciò che serve è regolare la posizione di sfondo con detta casella di controllo Attiva / Disattiva hack. Questa, secondo me, è la soluzione più elegante in quanto hai più controllo sulle tue caselle & Amp; radio e possono garantire che abbiano lo stesso aspetto sul browser.

HTML semplice: (segui il link per rivedere il CSS con commenti, il blocco di codice è per soddisfare StackOverflow) http://jsfiddle.net/Sx5M2/ 

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

Se qualcuno non è d'accordo con questi metodi, per favore lasciami un commento, mi piacerebbe sentire un feedback sul perché gli altri non hanno trovato queste soluzioni, o se hanno, perché non vedo risposte qui riguardo a loro? Se qualcuno vede uno di questi metodi fallire, sarebbe bello vederlo anche questo, ma questi sono stati testati negli ultimi browser e si basano su metodi HTML / CSS che sono abbastanza vecchi e universali per quanto ho visto.

Yay grazie! Anche questo mi ha fatto impazzire per sempre.

Nel mio caso particolare, questo ha funzionato per me: 

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

Sto usando reset.css che potrebbe spiegare alcune delle differenze, ma questo sembra funzionare bene per me.

position: relative; presenta alcuni problemi in IE con z-index e animazioni come slideUp / slideDown di 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');
    }
});

Probabilmente lo stile necessita di modifiche a seconda della dimensione del carattere utilizzata in <label>

PS:
Uso ie7js per far funzionare i CSS in IE6.

Usa semplicemente vertical-align: sub, come pokrishka già suggerito.

Fiddle

Codice HTML: 

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

Codice CSS: 

.checkboxes input {
    vertical-align: sub;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top