html - with - Come allineare le caselle di controllo e le loro etichette in modo coerente tra browser




php form css style (20)

A volte l'allineamento verticale necessita di due elementi in linea (estensione, etichetta, input, ecc.) L'uno accanto all'altro per funzionare correttamente. Le seguenti caselle di controllo sono correttamente centrate verticalmente in IE, Safari, FF e Chrome, anche se le dimensioni del testo sono molto piccole o grandi.

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

Lo svantaggio sono i tag SPAN extra senza significato.

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

Ora, se avessi un testo dell'etichetta molto lungo che doveva essere racchiuso senza wrapping sotto la casella di controllo, dovresti usare il padding e il rientro del testo negativo sugli elementi dell'etichetta:

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

Questo è uno dei problemi minori di CSS che mi affligge costantemente. In che modo le persone attorno a Stack Overflow allineano verticalmente le checkboxes e le loro labels coerente con il cross-browser ? Ogni volta che li alline correttamente in Safari (di solito usando vertical-align: baseline input ), sono completamente disattivati ​​in Firefox e IE. Risolvilo in Firefox, e Safari e IE sono inevitabilmente incasinati. Ho perso tempo su questo ogni volta che codice un modulo.

Ecco il codice standard con cui lavoro:

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

Di solito uso il reset di Eric Meyer, quindi gli elementi del modulo sono relativamente puliti dagli override. In attesa di eventuali suggerimenti o trucchi che hai da offrire!


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à gli elementi della lista in tre riquadri e cambierà semplicemente la larghezza per adattarsi.


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

Finisco anche nello sviluppo delle vinacce, per lo stesso motivo. Penso che il problema fondamentale con il controllo checkbox sia che si tratta in realtà di due controlli diversi: la scatola e l'etichetta. Utilizzando una casella di controllo, si lascia agli implementatori del controllo per decidere in che modo questi due elementi vengono visualizzati uno accanto all'altro (e hanno sempre sbagliato, dove errato = non ciò che si desidera).

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


Dopo oltre un'ora di modifica, test e prova di diversi stili di markup, penso che potrei avere una soluzione decente. I requisiti per questo particolare progetto erano:

  1. Gli input devono essere sulla propria linea.
  2. Gli input Checkbox 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 si avvolge, deve essere rientrato (quindi non eseguire il wrapping verso il basso sotto la casella di controllo).

Prima di ottenere qualsiasi spiegazione, ti darò 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 si stia utilizzando un reset come Eric Meyer che non sovrascrive i margini di input e il padding (quindi reimposta margini e padding nel CSS di input). Ovviamente in un ambiente live probabilmente anniderai / sostituirai cose per supportare altri elementi di input, ma volevo mantenere le cose semplici.

Cose da notare:

  • La dichiarazione *overflow è un hack inline di IE (l'hack della proprietà star). 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 per semplicità.
  • Come meglio posso dire, l'unica affermazione di vertical-align coerente tra i browser era vertical-align: bottom . L'impostazione di questo e il relativo posizionamento verso l'alto si sono comportati quasi identicamente in Safari, Firefox e IE con solo un pixel o due di discrepanza.
  • Il problema principale nel lavorare con l'allineamento è che IE mette un sacco di spazio misterioso attorno agli elementi di input. Non è padding o margine, ed è dannatamente persistente. Impostare larghezza e altezza sulla casella di controllo e quindi overflow: hidden per qualche ragione, elimina lo spazio extra e consente al posizionamento di IE di agire in modo molto simile a Safari e Firefox.
  • A seconda del tipo di ridimensionamento del testo, sarà sicuramente necessario regolare il posizionamento relativo, la larghezza, l'altezza e così via per ottenere risultati corretti.

Spero che questo aiuti qualcun altro! Non ho provato questa tecnica specifica su nessun altro progetto oltre a quello su cui stavo lavorando stamattina, quindi sicuramente rimproverati se trovi qualcosa che funzioni in modo più coerente.


Hardcode l'altezza e la larghezza della casella di controllo, rimuovi il padding e crea la sua altezza più i margini verticali pari all'altezza della riga dell'etichetta. Se il testo dell'etichetta è in linea, imposta la casella di controllo. Firefox, Chrome e IE7 + rendono tutti il ​​seguente esempio identico: http://www.kornea.com/css-checkbox-align


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


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

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>

Rende pixel-per-pixel uguali in Safari (di cui mi fido la linea di base) e sia Firefox che IE7 sono buoni. Funziona anche con varie dimensioni dei caratteri delle etichette, grandi e piccoli. Ora, per fissare la linea di base di IE su selezioni e input ...


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>

Quindi ho impostato tutte le caselle di controllo su 24px per altezza e larghezza. Per allineare il testo, 24px anche l' line-height della line-height dell'etichetta line-height 24px e assegna vertical-align: top; così:

EDIT: dopo IE test ho aggiunto vertical-align: bottom; all'input e modificato il CSS dell'etichetta. Potresti scoprire che hai bisogno di un caso css IE 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 trova che questo non funziona, per favore, fammi sapere. Qui è in azione (in Chrome e IE - scuse come screenshot sono stati presi su retina e utilizzando paralleli per IE):


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

Ho scoperto che vertical-align: sub fa sì che le checkbox siano abbastanza allineate in Chrome, Firefox e Opera. Non posso controllare Safari poiché non ho MacOS e IE10 è leggermente spento, ma ho trovato che sia una soluzione abbastanza buona per me.

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


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

<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 della versione completa 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>


Prova la mia soluzione, l'ho provata in IE 6, FF2 e Chrome e esegue il rendering 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>


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>


Se si utilizzano moduli Web ASP.NET , non è necessario preoccuparsi dei DIV e di altri elementi o dimensioni fisse. Possiamo allineare il testo <asp:CheckBoxList> impostando float:left al tipo di input CheckboxList in CSS.

Si prega di controllare 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>

Se utilizzi Twitter Bootstrap, puoi semplicemente utilizzare la classe di checkbox su <label> :

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

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

input {
    vertical-align: -2px;
}

Reference


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

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

prova vertical-align: middle

anche il tuo codice sembra come dovrebbe essere:

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


position: relative; ha 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');
    }
});

Lo stile richiede probabilmente modifiche a seconda della dimensione del carattere utilizzata in <label>

PS:
Io uso ie7js per far funzionare il css in IE6.


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


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

Dovresti avvolgere comunque i controlli del modulo raggruppati nei rispettivi campi, qui, suona il wrappa. set input / label do display: block, input float left, label float right, imposta la larghezza, controlla la spaziatura con i margini sinistro / destro, allinea il testo dell'etichetta di conseguenza.

così

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
}

probabilmente dovrai impostare bordi, contorni e altezza della linea sia per soluzioni cross-browser / multimediali.





html-form