Vraag Hoe selectievakjes en hun labels consistent uit te lijnen tussen browsers


Dit is een van de kleine CSS-problemen die me voortdurend plagen. Hoe mensen rond Stack Overflow verticaal uitlijnen checkboxes en hun labels consistent cross-browser? Telkens wanneer ik ze correct in Safari uitlijn (meestal met vertical-align: baseline op de input), ze zijn volledig uitgeschakeld in Firefox en IE. Fix it in Firefox, en Safari en IE zijn onvermijdelijk in de war. Ik verspil hier elke keer tijd aan als ik een formulier codeer.

Dit is de standaardcode waarmee ik werk:

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

Meestal gebruik ik de reset van Eric Meyer, dus formulierelementen zijn relatief vrij van overrides. Ik kijk uit naar tips of trucs die je te bieden hebt!


1507


oorsprong


antwoorden:


Na meer dan een uur tweaken, testen en verschillende stijlen van markeringen uitproberen, denk ik dat ik een fatsoenlijke oplossing heb. De vereisten voor dit specifieke project waren:

  1. Ingangen moeten op hun eigen lijn staan.
  2. Checkbox-ingangen moeten verticaal uitgelijnd zijn met de labeltekst op vergelijkbare wijze (indien niet identiek) in alle browsers.
  3. Als de labeltekst wordt ingepakt, moet deze ingesprongen zijn (dus geen omhulling onder het selectievakje).

Voordat ik inga op een uitleg, zal ik u de code geven:

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 is het werkvoorbeeld in JSFiddle.

Deze code gaat ervan uit dat je een reset gebruikt zoals Eric Meyer's die de invoermarges en opvulling niet overschrijft (en dus marge en opvulling opnieuw instelt in de invoer-CSS). Het is duidelijk dat je in een live-omgeving waarschijnlijk dingen zult nesten / negeren om andere invoerelementen te ondersteunen, maar ik wilde dingen eenvoudig houden.

Dingen om op te merken:

  • De *overflow declaratie is een inline IE-hack (de star-property hack). Zowel IE 6 als 7 zullen het opmerken, maar Safari en Firefox zullen het op de juiste manier negeren. Ik denk dat het een geldige CSS is, maar je bent nog steeds beter af met voorwaardelijke opmerkingen; gebruikte het gewoon voor de eenvoud.
  • Zo goed als ik kan zien, de enige vertical-align verklaring die consistent was in browsers was vertical-align: bottom. Dit en relatief positionering naar boven richtte zich bijna identiek in Safari, Firefox en IE met slechts een of twee pixelverschillen.
  • Het grootste probleem bij het werken met uitlijning is dat IE een hoop mysterieuze ruimte rond invoerelementen plakt. Het is geen vulling of marge en het is verdomd hardnekkig. Een breedte en hoogte instellen in het selectievakje en vervolgens overflow: hidden om wat voor reden afsnijdt de extra ruimte en laat IE's positionering op dezelfde manier werken als Safari en Firefox.
  • Afhankelijk van de grootte van uw tekst, zult u ongetwijfeld de relatieve positie, breedte, hoogte, enzovoort moeten aanpassen om de dingen er goed uit te laten zien.

Ik hoop dat dit iemand anders helpt! Ik heb deze specifieke techniek niet op andere projecten uitgeprobeerd dan die waaraan ik vanmorgen bezig was, dus stop zeker als je iets vindt dat consistenter werkt.


914



Soms heeft vertical-align twee inline (span, label, input, etc ...) elementen naast elkaar nodig om goed te kunnen werken. De volgende selectievakjes zijn correct verticaal gecentreerd in IE, Safari, FF en Chrome, zelfs als de tekstgrootte erg klein of groot is.

Ze zweven allemaal naast elkaar op dezelfde regel, maar de nurap betekent dat de hele labeltekst altijd naast het selectievakje blijft.

Het nadeel is de extra betekenisloze 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>

Nu, als u een heel lange labeltekst had dat nodig zijn om in te pakken zonder te wikkelen onder het selectievakje, zou u padding en negatieve tekst inspringen op de labelelementen:

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


170



Werken aan One Crayon's oplossing, Ik heb iets dat voor mij werkt en eenvoudiger is:

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>

Hiermee wordt pixel-voor-pixel hetzelfde weergegeven in Safari (waarvan ik de basiswaarde vertrouw) en zowel Firefox als IE7 controleren als goed. Het werkt ook voor verschillende lettergrootte, groot en klein. Nu, voor het vaststellen van IE's baseline op selects en inputs ...


155



Een eenvoudig ding dat goed lijkt te werken, is om de verticale positie van het selectievakje verticaal uit te lijnen. Het zal nog steeds per browser verschillen, maar de oplossing is ongecompliceerd.

input {
    vertical-align: -2px;
}

Referentie


117



proberen vertical-align: middle

ook lijkt jouw code te zijn:

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


77



Probeer mijn oplossing, ik heb het geprobeerd in IE 6, FF2 en Chrome en het wordt pixel voor pixel weergegeven in alle drie de browsers.

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


36



De enige perfect werkende oplossing voor mij is:

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

Vandaag getest in Chrome, Firefox, Opera, IE 7 en 8. Voorbeeld: Viool


24



Ik gebruik meestal lijnhoogte om de verticale positie van mijn statische tekst aan te passen:

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>

Ik hoop dat het helpt.


16



Ik heb mijn oplossing nog niet volledig getest, maar hij lijkt geweldig te werken.

Mijn HTML is gewoon:

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

Ik zet vervolgens alle selectievakjes in 24px voor zowel hoogte als breedte. Om de tekst op één lijn te brengen, maak ik de labels line-height ook 24px en toewijzen vertical-align: top; zoals zo:

BEWERK: Na IE-testen die ik heb toegevoegd vertical-align: bottom; naar de invoer en veranderde de CSS van het label. Misschien vindt u dat u een voorwaardelijke IE css-hoes nodig hebt om padding te sorteren - maar de tekst en box zijn 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;
}

Als iemand merkt dat dit niet werkt, laat het me alsjeblieft weten. Hier is het in actie (in Chrome en IE - excuses omdat screenshots werden gemaakt op retina en parallellen voor IE gebruikten):

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12



Ik denk dat dit de gemakkelijkste manier is

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

Viool


9



Dit werkt goed voor mij:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>


9