Jak wyrównać pola wyboru i ich etykiety konsekwentnie w różnych przeglądarkach

1733

Jest to jeden z mniejszych problemów CSS, który ciągle mnie trapi. W jaki sposób ludzie wokół przepełnienia stosu wyrównują się w pionie checkboxesi labelskonsekwentnie korzystają z różnych przeglądarek ? Ilekroć wyrównuję je poprawnie w Safari (zwykle używam vertical-align: baselinena input), są one całkowicie wyłączone w Firefox i IE. Napraw to w Firefoksie, a Safari i IE są nieuchronnie pomieszane. Tracę na tym czas za każdym razem, gdy koduję formularz.

Oto standardowy kod, z którym pracuję:

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

Zwykle używam resetowania Erica Meyera, więc elementy formularza są względnie czyste od przesłonięć. Czekamy na wszelkie porady i wskazówki, które masz do zaoferowania!

Jedna Kredka
źródło
7
Umieść każde pole wyboru i etykietę w elemencie <li>. Dodaj przepełnienie: ukryty do <li> i umieść etykietę i pole wyboru w lewo. Następnie wszystkie układają się idealnie w porządku. Nie umieszczaj oczywiście pola wyboru w elemencie etykiety.
tom pierwszy
5
Osiągnąłem to za pomocą heighti line-heightatrybutów, spójrz na jsfiddle.net/wepw5o57/3
TheGr8_Nik
Manipulacja positioni toprozwiązuje ten problem Przykład: jsfiddle.net/ynkjc22s
Profesor08
2019. wciąż ten sam problem. wciąż potrzebuję kilku hacków, aby to zadziałało :(
dieter
@dieter zobaczyć moją odpowiedź, wyjaśniłem, dlaczego hacki są potrzebne i jakie podejście nie jest hacky: stackoverflow.com/a/56558431/3995261
YakovL

Odpowiedzi:

1009

Po ponad godzinie poprawiania, testowania i próbowania różnych stylów znaczników, myślę, że mogę mieć przyzwoite rozwiązanie. Wymagania dla tego konkretnego projektu były następujące:

  1. Wejścia muszą być w osobnej linii.
  2. Pola wyboru muszą być wyrównane pionowo z tekstem etykiety podobnie (jeśli nie identycznie) we wszystkich przeglądarkach.
  3. Jeśli tekst etykiety jest zawijany, musi być wcięty (aby nie zawijał się pod polem wyboru).

Zanim przejdę do wyjaśnienia, dam ci kod:

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>

Oto działający przykład w JSFiddle .

Ten kod zakłada, że ​​używasz resetowania takiego jak Eric Meyer, który nie zastępuje marginesów wejściowych i dopełniania (stąd wstawianie resetu marginesów i dopełniania do wejściowego CSS). Oczywiście w środowisku na żywo prawdopodobnie zagnieżdżasz / zastępujesz elementy w celu obsługi innych elementów wejściowych, ale chciałem zachować prostotę.

Ważne uwagi:

  • *overflowDeklaracja jest inline IE Hack (hack gwiazdy nieruchomość). Zarówno IE 6, jak i 7 to zauważą, ale Safari i Firefox odpowiednio go zignorują. Myślę, że może to być poprawny CSS, ale nadal lepiej jest z komentarzami warunkowymi; użyłem go dla uproszczenia.
  • Jak mogę najlepiej powiedzieć, jedynym vertical-alignstwierdzeniem, które było spójne w różnych przeglądarkach, było vertical-align: bottom. Ustawienie tego, a następnie względne ustawienie w górę zachowało się prawie identycznie w Safari, Firefox i IE z tylko jednym pikselem lub dwoma rozbieżnościami.
  • Głównym problemem w pracy z wyrównaniem jest to, że IE umieszcza tajemniczą przestrzeń wokół elementów wejściowych. To nie jest padding ani margines i jest cholernie trwałe. Ustawienie szerokości i wysokości pola wyboru, a następnie overflow: hiddenz jakiegoś powodu odcina dodatkową przestrzeń i pozwala pozycjonowaniu IE działać bardzo podobnie do Safari i Firefox.
  • W zależności od rozmiaru tekstu bez wątpienia będziesz musiał dostosować względne położenie, szerokość, wysokość itd., Aby wszystko wyglądało dobrze.

Mam nadzieję, że to pomoże komuś innemu! Nie próbowałem tej konkretnej techniki w żadnym innym projekcie niż ten, nad którym pracowałem dziś rano, więc zdecydowanie pomóżcie, jeśli znajdziecie coś, co działa bardziej konsekwentnie.

Jedna Kredka
źródło
8
Uwaga. Prawdopodobnie powinieneś umieścić atrybut „for” na etykiecie, aby upewnić się, że działa on we wszystkich przeglądarkach i czytnikach tekstu. (Zdaję sobie sprawę, że prawdopodobnie pominąłeś to dla uproszczenia)
Armstrongest
306
Żałoba, nie zdawałem sobie sprawy z tego, ilu ludzi było tego nieświadomych: jeśli zawijasz dane wejściowe w etykiecie etykiety, atrybut „for” jest niepotrzebny. Zachęcamy do zobaczenia na własne oczy
One Crayon
10
Nie zgadzam się z sugestią dotyczącą używania komentarzy warunkowych. Zachowaj hack * foobar CSS. To działa dobrze, jest używane przez frameworki takie jak YUI i pozwala zachować razem to, co należy do siebie.
ebruchez
50
Próbowałem tego w Chrome 28, Mac OSX, a pole wyboru jest wyraźnie niższe niż tekst
MusikAnimal
9
Uwaga: nie działa to w najnowszych wersjach Chrome (używam v36). i.imgur.com/y9Ffxsh.png Edytuj: ani Firefox (v31)
Hans
214

Czasami wyrównanie w pionie wymaga dwóch wbudowanych elementów (zakresu, etykiety, danych wejściowych itp.) Obok siebie, aby działać poprawnie. Następujące pola wyboru są odpowiednio wyśrodkowane pionowo w IE, Safari, FF i Chrome, nawet jeśli rozmiar tekstu jest bardzo mały lub duży.

Wszystkie unoszą się obok siebie w tym samym wierszu, ale nowrap oznacza, że ​​cały tekst etykiety zawsze pozostaje obok pola wyboru.

Minusem są dodatkowe bezsensowne tagi SPAN.

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

Teraz, jeśli masz bardzo długi tekst etykiety, który trzeba było zawinąć bez zawijania pod polem wyboru, możesz użyć dopełnienia i wcięcia w tekście negatywnym na elementach etykiety:

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

Nathan Bowers
źródło
19
Dzięki! „Vertical-align: middle” zarówno na wejściu, jak i na rozpiętości działało dla mnie świetnie.
William Gross,
6
display: block; float: left;wydaje się zbędny
PHPst
4
Nie musisz używać atrybutu for, jeśli dane wejściowe znajdują się wewnątrz etykiety. To działa bez tego.
Tommy Sørensen,
6
To powinna być zaakceptowana odpowiedź według mojej opinii. Nie wymaga żadnych poprawek.
Tim
4
Niesamowite i potwierdzone nadal działa na Chrome 58 (Windows) (w przeciwieństwie do obecnej najwyższej odpowiedzi).
Jason C
188

Pracując nad rozwiązaniem One Crayon , mam coś, co działa dla mnie i jest prostsze:

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

Renderuje piksel za piksel tak samo w Safari (którego linii bazowej ufam), a zarówno Firefox, jak i IE7 sprawdzają się dobrze. Działa również dla różnych rozmiarów czcionek etykiet, dużych i małych. Teraz, do ustalenia linii bazowej IE dla selekcji i danych wejściowych ...


Aktualizacja: (edycja innej firmy)

Właściwa bottompozycja zależy od rodziny czcionek i rozmiaru czcionki! Zauważyłem, że użycie bottom: .08em;elementów kontrolnych i radiowych jest dobrą wartością ogólną. Przetestowałem to w Chrome / Firefox / IE11 w systemie Windows z czcionkami Arial i Calibri, używając kilku małych / średnich / dużych rozmiarów czcionek.

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

S.Serpooshan
źródło
10
Uwaga dla innych: to nie będzie działać w IE6, ponieważ nie obsługuje kierowania CSS [type = checkbox].
Jedna kredka
3
Możesz po prostu dodać klasę zamiast używać nieobsługiwanych selektorów, jeśli wymagana jest obsługa IE6.
HartleySan,
1
Ten działał dla mnie. Jednak zamiast ustawiać „pozycja: względna; dolna: 1px”, można użyć „marginesu: 0 0 1px 0”, aby osiągnąć ten sam wynik.
newman
142

Jedną łatwą rzeczą, która wydaje się działać dobrze, jest dostosowanie pionowej pozycji pola wyboru za pomocą wyrównania pionowego. Wciąż będzie się różnić w różnych przeglądarkach, ale rozwiązanie jest nieskomplikowane.

input {
    vertical-align: -2px;
}

Odniesienie

Frank Schwieterman
źródło
9
To była najmniejsza zmiana spośród wszystkich innych, która działa dla mnie w najnowszych wersjach przeglądarek.
Johnny_D,
6
Działa to nawet lepiej niż z vertical-aligni position: relativeponieważ działa również poprawnie w IE9 :)
Dennis98
5
ale zależy to od rozmiaru czcionki. w przypadku dużych rozmiarów czcionek należy je dostosować do wyższych wartości ujemnych, np .: vertical-align: -6px;
S.Serpooshan,
1
przypuszczalnie może to działać lepiej z różnymi czcionkami, jeśli ustawioneem
YakovL
92

próbować vertical-align: middle

również twój kod wydaje się być taki:

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

digitalsanctum
źródło
<label for="blah">jest konieczne tylko wtedy, gdy używasz czegoś, co nie ma sensu, aby etykieta się zawijała (jak pole tekstowe; zazwyczaj używam <label for="blah">Foo</label><input id="blah" type="text" />w tym przypadku). Z polami wyboru uważam, że jest mniej znaczników, aby je zawinąć.
One Crayon
13
Niezupełnie prawda: funkcja Label-for pozwoli użytkownikom kliknąć etykietę w celu zaznaczenia pola wyboru, a także po prostu kliknąć samo pole wyboru. Jest to dość przydatne do wiązania dwóch elementów razem.
EndangeredMassa,
26
Jeśli dane wejściowe są zagnieżdżone w etykiecie, kliknięcie etykiety za pomocą aktywuj / skup fokus na danych wejściowych; atrybut for dotyczy wyłącznie przypadku, gdy dane wejściowe nie są zagnieżdżone.
One Crayon
3
To prawda One Crayon, ale nadal dobrą praktyką jest używanie atrybutu „for”, w przeciwnym razie będziesz mieć problemy z niektórymi przeglądarkami, które nie rozpoznają IE tej kaszel składni .
Armstrongest
jeśli nie chcesz, aby twoje pole wyboru miało identyfikator, musisz zawinąć pole wyboru w etykietę
Simon_Weaver 30.01.2009
39

Wypróbuj moje rozwiązanie, wypróbowałem je w IE 6, FF2 i Chrome i renderuje piksel po pikselu we wszystkich trzech przeglądarkach.

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

Waleed Eissa
źródło
3
Ciekawy; Podoba mi się pomysł unoszenia obu elementów; to elegancko rozwiązuje problem owijania. Ja jestem przywiązany do owijania wejście z etykietą, ale że kod jest kawał o wiele czystsze niż roztworu I przybył.
One Crayon
w tym przykładzie wejście i etykieta pola wyboru powinny mieć także właściwość display: block, w takim przypadku będą traktowane jak normalne DIV, które można łatwo wyrównać
se_pavel 17.04.2009
5
ma to problem, co się stanie, jeśli etykieta nie zmieści się w dostępnej przestrzeni? etykieta i pole wyboru są oddzielone (pole wyboru jest w górę w prawo, a etykieta w dół w lewo). Jeśli umieścisz pole wyboru w etykiecie, nie masz tego problemu.
Enrique
Nie działał do piksela, ale był wystarczająco przyzwoity, aby sprawić, że będzie wyglądał lepiej w 3 głównych przeglądarkach. Przypuszczam, że mógłbym spędzić kolejną godzinę, by przekonać się, że będzie działać lepiej ...
Alexis Wilke
26

Jedyne dla mnie idealnie działające rozwiązanie to:

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

Testowane dzisiaj w Chrome, Firefox, Opera, IE 7 i 8. Przykład: Fiddle

Buzogany Laszlo
źródło
22

Nie przetestowałem całkowicie mojego rozwiązania, ale wydaje się, że działa świetnie.

Mój HTML to po prostu:

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

Następnie ustawiam wszystkie pola wyboru 24pxdla wysokości i szerokości. Aby tekst był wyrównany robię etykieta jest line-heightrównież 24pxi przypisać vertical-align: top;tak:

EDYCJA: Po przetestowaniu IE dodałem vertical-align: bottom;do danych wejściowych i zmieniłem CSS etykiety. Może się okazać, że potrzebujesz warunkowego przypadku IE css, aby uporządkować wypełnienie - ale tekst i pole są wbudowane.

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;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Jeśli ktoś stwierdzi, że to nie działa, proszę dać mi znać. Oto jest w akcji (w Chrome i IE - przeprosiny, ponieważ zrzuty ekranu zostały zrobione na siatkówce i przy użyciu paraleli dla IE):

zrzut ekranu pól wyboru: Chrome zrzut ekranu pól wyboru: IE

Patrick
źródło
1
Jest to dość stare, ale ponieważ poprosiłeś o informację, nie działa to dobrze w FireFox (pola wyboru znajdują się powyżej linii bazowej). Być może zainteresuje Cię szczegółowe wyjaśnienie , które zamieściłem
JakowL,
20

Zazwyczaj używam wysokości linii, aby dopasować pionowe położenie mojego tekstu statycznego:

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>

Mam nadzieję, że to pomaga.

Plan B
źródło
wysokość linii, duh. Zawsze o tym zapomnij. Dobra robota, działa świetnie.
Craig
13

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

Sztuką jest użycie wyrównania w pionie tylko w komórkach tabeli lub w wierszu blokowym, jeśli używany jest znacznik etykiety.

Carlo Pires
źródło
11

Na koniec spójrzmy na źródło problemu

Pola wyboru są renderowane przy użyciu obrazów (można ustawić niestandardowe za pomocą CSS). Oto (niezaznaczone) pole wyboru w FireFox, podświetlone za pomocą inspektora DOM:

to tylko kwadrat

A oto to samo niestylowane pole wyboru w Chrome:

jest to bezcentryczny kwadrat z „marginesami” po prawej i na dole

Możesz zobaczyć margines (pomarańczowy); wypełnienie nie jest obecne (byłoby pokazane na zielono). Więc co to za pseudo-margines po prawej i na dole pola wyboru? Są to części obrazu użyte dla pola wyboru . Dlatego używanie po prostu vertical-align: middletak naprawdę nie wystarcza i jest to przyczyną problemów w różnych przeglądarkach.

Co więc możemy z tym zrobić?

Jedną z oczywistych opcji jest - zastąp zdjęcia! Na szczęście można to zrobić za pomocą CSS i zastąpić je obrazami zewnętrznymi, obrazami base64 (in-CSS), svg w CSS lub po prostu pseudoelementami. Jest to solidne podejście (w różnych przeglądarkach!), A oto przykład takiej korekty skradzionej z tego pytania :

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

Możesz przeczytać bardziej szczegółowe artykuły na temat takich stylizacji, takie jak niektóre wymienione tutaj ; jest poza zakresem tej odpowiedzi.

Ok, nadal co z rozwiązaniem no-custom-images-or-pseudo-elements?

TL; DR: wygląda na to, że to nie zadziała, zamiast tego użyj niestandardowego pola wyboru

Po pierwsze, zauważmy, że jeśli w innych przeglądarkach te pseudo-marginesy wewnątrz ikony pola wyboru były dowolne, nie byłoby spójnego rozwiązania. Aby go zbudować, musimy zbadać anatomię takich obrazów w istniejących przeglądarkach.

Więc jakie przeglądarki mają pseudo-marginesy w polach wyboru? Sprawdziłem Chrome 75, Vivaldi 2.5 (oparty na Chromium), FireFox 54 (nie pytaj, dlaczego tak nieaktualny), IE 11, Edge 42, Safari ?? (pożyczyłem jeden na minutę, zapomniałem sprawdzić wersję). Tylko Chrome i Vivaldi mają takie pseudo-marginesy (podejrzewam również, że wszystkie przeglądarki oparte na Chromium, takie jak Opera).

Jaki jest rozmiar tych pseudo-marginesów? Aby to rozgryźć, można użyć powiększonego pola wyboru:

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

mój wynik to ~ 7% szerokości / wysokości, a zatem 0,9-1,0px w jednostkach bezwzględnych. Dokładność może jednak zostać zakwestionowana: wypróbuj różne wartości zoomdla pola wyboru. W moich testach zarówno w Chrome, jak i Vivaldi, względny rozmiar pseudo-marginesu jest bardzo różny dla zoomwartości 10, 20 i dla wartości 11-19 (??):

dla powiększenia = 10 to 7% podczas gdy dla zoomu = 11 jest to prawie dwukrotność tej wartości

scale wydaje się bardziej spójny:

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

więc prawdopodobnie ~ 14% i 2px są poprawnymi wartościami.

Teraz, gdy wiemy (?) Rozmiar pseudo-marginesu, zauważmy, że to nie wystarczy. Czy rozmiary ikon pól wyboru są takie same dla wszystkich przeglądarek? Niestety! Oto, co pokazuje inspektor DOM dla niestylowanych pól wyboru:

  • FireFox: 13,3px
  • Oparty na chromie : 12,8 pikseli za całość, stąd 12,8 (100% - 14%) = 11 pikseli za to, co jest wizualnie postrzegane jako pole wyboru
  • IE 11, Edge: 13px
  • Safari: nie dotyczy (uważam, że należy je porównać na tym samym ekranie)

Zanim omówimy jakieś rozwiązania lub sztuczki, zapytajmy: co to jest prawidłowe wyrównanie? Co staramy się osiągnąć? Do pewnego stopnia jest to kwestia gustu, ale w zasadzie mogę myśleć o następujących aspektach „miłych” dopasowań:

tekst i pole wyboru na tej samej linii bazowej (celowo nie zmieniam tutaj pola wyboru):

wprowadź opis zdjęcia tutaj

lub mają tę samą środkową linię pod względem małych liter:

wprowadź opis zdjęcia tutaj

lub ta sama środkowa linia pod względem wielkich liter (łatwiej zobaczyć różnicę dla różnych rozmiarów czcionek):

wprowadź opis zdjęcia tutaj

a także musimy zdecydować, czy rozmiar pola wyboru powinien być równy wysokości małej litery, dużej litery lub czegoś innego (większy, mniejszy lub między małymi a dużymi).

W tej dyskusji nazwijmy wyrównanie ładnym, jeśli pole wyboru znajduje się na tej samej linii bazowej co tekst i ma wielkość dużej litery (wysoce dyskusyjny wybór):

wprowadź opis zdjęcia tutaj

Teraz jakie narzędzia musimy:

  1. dostosuj rozmiar pola wyboru
  2. rozpoznaj Chromium za pomocą jego pseudo-marginesowego pola wyboru i ustaw określone style
  3. dostosuj wyrównanie pionowe pola wyboru / etykiety

?

  1. Jeśli chodzi o regulację wielkości pola wyboru : istnieją width, height, size, zoom, scale(mieć coś przeoczyłem?). zoomi scalenie pozwalają ustawiać rozmiaru bezwzględnego, więc mogą pomóc tylko w dostosowaniu do rozmiaru tekstu, a nie ustawiać rozmiaru w różnych przeglądarkach (chyba że możemy napisać reguły specyficzne dla przeglądarki). sizenie działa z Chrome (czy działało ze starą IE? zresztą to nie jest takie interesujące). widthi heightdziałamy w Chrome i innych przeglądarkach, więc możemy ustawić wspólny rozmiar, ale znowu w Chrome ustawia rozmiar całego obrazu, a nie samego pola wyboru. Uwaga: minimalna (szerokość, wysokość) określa rozmiar pola wyboru (jeśli szerokość ≠ wysokość, pole poza kwadratem pola wyboru jest dodawane do „pseudo-marginesu”).

    Niefortunne jest to, że pseudo-marginesy w Chrome nie są ustawione na zero dla żadnej szerokości i wysokości, o ile widzę.

  2. Obawiam się, że obecnie nie ma niezawodnej metody opartej tylko na CSS .

  3. Rozważmy wyrównanie pionowe. vertical-alignnie może dać spójnych wyników po ustawieniu na middlelub z baselinepowodu pseudo-marginesu Chrome, jedyną realną opcją uzyskania tego samego „układu współrzędnych” dla wszystkich przeglądarek jest wyrównanie etykiety i danych wejściowych do top:

    porównanie wyrównania w pionie: góra i dół

    (na zdjęciu: wyrównanie w pionie: góra, dół i dół bez cienia)

Jaki więc z tego wynikniemy?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}
<label><input type="checkbox">label</label>

Powyższy fragment działa z Chrome (przeglądarki oparte na Chromium), ale inne przeglądarki wymagają mniejszego rozmiaru pola wyboru. Wydaje się, że niemożliwe jest dostosowanie zarówno rozmiaru, jak i wyrównania w pionie w sposób, który działa wokół dziwactwa obrazu pola wyboru Chromium. Moja ostatnia propozycja to: zamiast tego użyj niestandardowych pól wyboru - unikniesz frustracji :)

JakowL
źródło
Ta odpowiedź jest tak głęboka!
Marecky
10

Teraz, gdy Flexbox jest obsługiwany we wszystkich nowoczesnych przeglądarkach, coś takiego wydaje mi się łatwiejsze.

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


Oto pełna wersja demonstracyjna z prefiksowaną wersją:

Bryan Willis
źródło
10

Myślę, że to najłatwiejszy sposób

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

gidzior
źródło
pytanie brzmi: czy działa dobrze we wszystkich przeglądarkach? ;-)
JonSnow
9

Nie podoba mi się pozycjonowanie względne, ponieważ powoduje, że element jest renderowany ponad wszystko inne na jego poziomie (może mieć coś nad sobą, jeśli masz złożony układ).

Odkryłem, że vertical-align: subsprawia , że pola wyboru wyglądają wystarczająco dobrze wyrównane w Chrome, Firefox i Opera. Nie mogę sprawdzić Safari, ponieważ nie mam MacOS, a IE10 jest nieco wyłączony, ale okazało się, że jest to dla mnie wystarczająco dobre rozwiązanie.

Innym rozwiązaniem może być próba stworzenia określonego CSS dla każdej przeglądarki i dostrojenie go za pomocą wyrównania w pionie w% / pixel / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

waterplea
źródło
Wydaje się działać, o ile rozmiar czcionki nie jest zbyt duży.
robsch
9

Działa to dla mnie dobrze:

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>

dylanfm
źródło
8
na zdrowie za używanie ems zamiast pxs.
IDisposable
7

Wybrana odpowiedź z ponad 400 głosami pozytywnymi nie działała dla mnie w Chrome 28 OSX, prawdopodobnie dlatego, że nie została przetestowana w OSX lub że działała w czymkolwiek, co było w 2008 roku, kiedy odpowiedź na to pytanie.

Czasy się zmieniły, a nowe rozwiązania CSS3 są teraz wykonalne. Moje rozwiązanie wykorzystuje pseudoelementy do utworzenia niestandardowego pola wyboru . Więc postanowienia (plusy lub minusy, jakkolwiek na to spojrzeć) są następujące:

  • Działa tylko w nowoczesnych przeglądarkach (FF3.6 +, IE9 +, Chrome, Safari)
  • Opiera się na specjalnie zaprojektowanym polu wyboru, które będzie renderowane dokładnie tak samo w każdej przeglądarce / systemie operacyjnym. Tutaj właśnie wybrałem kilka prostych kolorów, ale zawsze możesz dodawać gradienty liniowe i takie, aby nadać mu mocniejszy wybuch.
  • Jest dostosowany do określonej czcionki / rozmiaru czcionki, który w przypadku zmiany wystarczy zmienić położenie i rozmiar pola wyboru, aby wyglądało na wyrównane w pionie. Jeśli poprawione poprawnie, wynik końcowy powinien być prawie dokładnie taki sam we wszystkich systemach przeglądarek / systemach operacyjnych.
  • Brak właściwości wyrównania w pionie, brak pływaków
  • Należy użyć dostarczonego znacznika w moim przykładzie, nie będzie działać, jeśli będzie miał strukturę podobną do pytania, jednak układ będzie wyglądał zasadniczo tak samo. Jeśli chcesz przenosić różne elementy, musisz także przenieść związany z nimi 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;
}
<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

To rozwiązanie ukrywa pole wyboru oraz dodaje i stylizuje pseudoelementy do etykiety, aby utworzyć widoczne pole wyboru. Ponieważ etykieta jest powiązana z ukrytym polem wyboru, pole wejściowe będzie nadal aktualizowane, a wartość zostanie przesłana z formularzem.

A jeśli jesteś zainteresowany, oto moje spojrzenie na przyciski radiowe: http://jsfiddle.net/DtKrV/2/

Mam nadzieję, że ktoś uzna to za przydatne!

MusikAnimal
źródło
6

Nigdy nie miałem z tym problemu:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>
John Topley
źródło
4
Jak powiedziałem wcześniejszym posterom, którzy to zalecili: Nie podoba mi się to, ponieważ wymaga niepotrzebnych znaczników. Próbowałem też tego znacznika, ale trudno było zapobiec zawijaniu się etykiety pod wejściem (wciąż mając grupę etykiet / wejścia na swoich liniach).
One Crayon,
7
Więc zamiast „niepotrzebnego” znacznika (używanego prawdopodobnie przez prawie wszystkich), wolisz mieć niepotrzebny CSS?
Robert C. Barth
10
Problem z podstawkami do owijania. Ale generalnie tak, wolałbym mieć dodatkowy CSS niż znaczniki, ponieważ CSS jest buforowany, ale może być konieczne ponowne ładowanie znaczników dla każdej nowej strony.
One Crayon
4
Porównaj: 1 wystąpienie dodatkowego CSS -vs- wiele wystąpień dodatkowego znacznika.
Greg
6

Jeśli korzystasz z formularzy internetowych ASP.NET , nie musisz martwić się o DIV i inne elementy lub stałe rozmiary. Możemy wyrównać <asp:CheckBoxList>tekst, ustawiając float:lefttyp wejściowy CheckboxList w CSS.

Sprawdź następujący przykładowy kod:

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

Kod .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
Rama Subba Reddy M.
źródło
3

Jeśli używasz Bootstrap na Twitterze, możesz po prostu użyć checkboxklasy na <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
Sunil D.
źródło
3

Z polem wyboru typu danych wejściowych owiniętym wewnątrz etykiety i przesuniętym w lewo w następujący sposób:

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

to działało dla mnie:

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

Upewnij się, że wysokość jest identyczna z wysokością linii (poziom bloku).

Matijs
źródło
3

Zakoduj na stałe wysokość i szerokość pola wyboru, usuń dopełnienie i ustaw jego wysokość plus pionowe marginesy równe wysokości linii etykiety. Jeśli tekst etykiety jest wbudowany, umieść pole wyboru. Firefox, Chrome i IE7 + renderują identycznie następujący przykład: http://www.kornea.com/css-checkbox-align

user2407309
źródło
Miły! Ale powinieneś rozważyć skopiowanie tutaj kodu HTML i CSS. Odpowiedzi, które tak bardzo zależą od linku zewnętrznego, są odradzane. Link jest nadal cenny, aby zobaczyć wyniki, ale myślę, że pokazanie kodu tutaj pomoże ci zdobyć więcej głosów.
Mariano Desanze
nie, nie robią tego (porównaj w FireFox i Chrome, w Chrome pola wyboru znajdują się powyżej linii bazowej), wyjaśniłem dlaczego
YakovL
Dlaczego twierdzisz, że nie jest obsługiwany nawet w przypadku zrzutów ekranu z obu przeglądarek. Twoim zadaniem jest dostarczenie dowodu roszczenia, gdy je złożysz, a nie innych, aby je obalić. Porównałem je i dodałem zrzuty ekranu, ale komentarze nie obsługują dodawania zdjęć; możesz jednak spojrzeć na zdjęcia w mojej odpowiedzi. Może to jednak różnić się w zależności od wersji przeglądarki, dlatego pomocne byłoby udostępnianie zrzutów ekranu z adnotacjami zawierającymi wersje przeglądarki.
JakowL,
Odwiedź stronę, do której prowadzę linki w różnych przeglądarkach.
Vladimir Kornea
Więc to zrobiłem? :) Nie widzisz różnicy? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Podczas gdy w FireFox są idealnie wyrównane, w Chrome pole wyboru dotyczy linii bazowej (nawiasem mówiąc, możesz użyć wzmianek za pośrednictwem @, jeśli jesteś zainteresowany szybszymi odpowiedziami)
JakowL,
3

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

główny
źródło
2

Zazwyczaj zostawiam pole wyboru nieoznaczone, a następnie umieszczam jego „etykietę” jako osobny element. To bolesne, ale istnieje tak duża różnica między przeglądarkami między sposobem wyświetlania pól wyboru i ich etykiet (jak zauważyłeś), że jest to jedyny sposób, w jaki mogę zbliżyć się do kontrolowania, jak wszystko wygląda.

Z tego samego powodu robię to również przy tworzeniu winforms. Myślę, że podstawowym problemem z formantem pola wyboru jest to, że tak naprawdę są to dwa różne formanty: pole i etykieta. Używając pola wyboru, pozostawiasz to implementatorom kontroli, aby zdecydowali, w jaki sposób te dwa elementy są wyświetlane obok siebie (i zawsze źle to robią, gdzie źle = nie to, czego chcesz).

Naprawdę mam nadzieję, że ktoś ma lepszą odpowiedź na twoje pytanie.

MusiGenesis
źródło
2

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>

Powyższy kod umieści elementy listy w trzykolach i po prostu zmieni szerokość w celu dopasowania.

Philip Bevan
źródło
2

Poniższe informacje zapewniają spójną w pikselach spójność między przeglądarkami, nawet IE9:

Podejście to jest dość rozsądne, do tego stopnia, że ​​jest oczywiste:

  1. Utwórz dane wejściowe i etykietę.
  2. Wyświetlaj je jako blok, dzięki czemu możesz unosić je w dowolny sposób.
  3. Ustaw wysokość i wysokość linii na tę samą wartość, aby zapewnić ich wyśrodkowanie i wyrównanie w pionie.
  4. W przypadku pomiarów em , aby obliczyć wysokość elementów, przeglądarka musi znać wysokość czcionki dla tych elementów i sama nie może być ustawiona w pomiarach em.

Wynikiem tego jest ogólna zasada ogólna:

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

Rozmiar czcionki dostosowywany do formularza, zestawu pól lub elementu.

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

Testowane w najnowszych przeglądarkach Chrome, Safari i Firefox na komputerach Mac, Windows, Iphone i Androidzie. I IE9.

Ta metoda prawdopodobnie ma zastosowanie do wszystkich typów wprowadzania, które nie są wyższe niż jeden wiersz tekstu. Zastosuj odpowiednią regułę typu.

Henrik Erlandsson
źródło
hm, wygląda to dobrze, kiedy etykieta zaczyna się od małej litery, ale jeśli zaczyna się od dużej, jest znacznie gorzej. Czy możesz tutaj dodać fragment kodu?
JakowL,
2

Wiem, że na to pytanie udzielono odpowiedzi wiele razy, ale czuję, że mam o wiele bardziej eleganckie rozwiązanie niż te, które już zostały dostarczone. I nie tylko 1 eleganckie rozwiązanie, ale 2 oddzielne rozwiązania, które łaskoczą Twoją fantazję. Powiedziawszy to, wszystko, co musisz wiedzieć i zobaczyć, znajduje się w 2 JS Fiddle, z komentarzami.


Rozwiązanie nr 1 polega na natywnym „polu wyboru” danej przeglądarki, choć z pewnym akcentem ... Jest zawarty w div, który jest łatwiejszy do pozycjonowania w różnych przeglądarkach, z przepełnieniem: ukryty, aby posiekać nadmiar rozciągniętego pola wyboru 1px (jest tak, że nie widać brzydkich granic FF)

Prosty HTML: (kliknij link, aby przejrzeć css z komentarzami, blok kodu ma zaspokoić przepływ stosu ) http://jsfiddle.net/KQghJ/

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

Rozwiązanie nr 2 używa „Checkbox Toggle Hack” do przełączania stanu CSS DIV, który został poprawnie umieszczony w przeglądarce i skonfigurowany za pomocą prostego duszka dla pola wyboru niezaznaczonego i zaznaczonego. Wszystko, co jest potrzebne, to dostosowanie pozycji tła za pomocą wspomnianego pola wyboru Przełącz hack. To, moim zdaniem, jest bardziej eleganckie rozwiązanie, ponieważ masz większą kontrolę nad polami wyboru i radiotelefonami i może zagwarantować, że będą wyglądać tak samo w przeglądarce.

Prosty HTML: (kliknij link, aby przejrzeć CSS z komentarzami, blok kodu ma spełnić StackOverflow) http://jsfiddle.net/Sx5M2/

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

Jeśli ktoś nie zgadza się z tymi metodami, proszę zostawić komentarz, chciałbym usłyszeć opinie na temat tego, dlaczego inni nie natknęli się na te rozwiązania, a jeśli tak, dlaczego nie widzę tutaj odpowiedzi na ich temat? Jeśli ktoś zobaczy, że jedna z tych metod zawodzi, dobrze byłoby to również zobaczyć, ale zostały one przetestowane w najnowszych przeglądarkach i polegają na metodach HTML / CSS, które są dość stare i uniwersalne, o ile widziałem.

NinjaKC
źródło
1

Dziękuję! To też doprowadzało mnie do szału na zawsze.

W moim szczególnym przypadku działało to dla mnie:

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

Używam reset.css, co może wyjaśniać niektóre różnice, ale wydaje mi się, że działa to dobrze.

Jeff
źródło
1

position: relative; ma pewne problemy w IE z indeksem Z i animacjami, takie jak slideUp / slideDown 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');
    }
});

Styl prawdopodobnie wymaga poprawek w zależności od używanego rozmiaru czcionki <label>

PS:
Używam ie7js, aby css działał w IE6.

Bob Fanger
źródło
1

Używaj po prostu vertical-align: sub, jak już sugerowano pokrishka .

Skrzypce

Kod HTML:

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

Kod CSS:

.checkboxes input {
    vertical-align: sub;
}
Marco Sulla
źródło
1

Proste rozwiązanie:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Testowane w Chrome, Firefox, IE9 +, Safari, iOS 9+

Dylan Sharhon
źródło