Cara menyelaraskan kotak centang dan labelnya secara konsisten lintas-peramban


1734

Ini adalah salah satu masalah kecil CSS yang terus menerus mengganggu saya. Bagaimana orang-orang di sekitar Stack Overflow menyelaraskan secara vertikal checkboxesdan browserlabels secara konsisten ? Setiap kali saya menyelaraskannya dengan benar di Safari (biasanya menggunakan pada ), mereka sepenuhnya mati di Firefox dan IE. Perbaiki di Firefox, dan Safari serta IE pasti akan kacau. Saya membuang waktu untuk hal ini setiap kali saya membuat kode formulir.vertical-align: baselineinput

Berikut kode standar yang saya gunakan:

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

Saya biasanya menggunakan reset Eric Meyer, jadi elemen form relatif bersih dari penggantian. Menantikan tips atau trik yang Anda tawarkan!


7
Letakkan setiap kotak centang dan label di dalam elemen <li>. Tambahkan overflow: disembunyikan ke <li> dan float label dan centang kotak kiri. Kemudian mereka semua menyelaraskan dengan sangat baik. Jangan letakkan kotak centang di dalam elemen label dengan jelas.
volume satu

5
Saya telah mendapatkannya dengan menggunakan heightdan line-heightatribut, memberikan tampilan ke jsfiddle.net/wepw5o57/3
TheGr8_Nik

Manipulasi dengan positiondan topakan menyelesaikan masalah ini Contoh: jsfiddle.net/ynkjc22s
Profesor08

2019. masih masalah yang sama. masih membutuhkan beberapa peretasan untuk membuatnya bekerja :(
dieter

@dieter melihat jawaban saya, saya telah menjelaskan mengapa peretasan diperlukan dan pendekatan apa yang tidak
peretasan

Jawaban:


1010

Setelah lebih dari satu jam mengutak-atik, menguji, dan mencoba gaya markup yang berbeda, saya pikir saya mungkin memiliki solusi yang layak. Persyaratan untuk proyek khusus ini adalah:

  1. Input harus pada jalurnya sendiri.
  2. Input kotak centang perlu disejajarkan secara vertikal dengan teks label yang sama (jika tidak identik) di semua browser.
  3. Jika teks label dibungkus, itu perlu indentasi (jadi tidak ada pembungkus di bawah kotak centang).

Sebelum saya masuk ke penjelasan, saya hanya akan memberi Anda kode:

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>

Berikut ini contoh kerjanya di JSFiddle .

Kode ini mengasumsikan bahwa Anda menggunakan reset seperti Eric Meyer yang tidak mengesampingkan margin input form dan padding (karenanya menempatkan margin dan reset padding di input CSS). Jelas dalam lingkungan hidup Anda mungkin akan bersarang / mengesampingkan hal-hal untuk mendukung elemen input lainnya, tetapi saya ingin menjaga hal-hal sederhana.

Hal yang perlu diperhatikan:

  • Itu *overflow deklarasi inline IE hack (hack bintang-properti). Baik IE 6 dan 7 akan menyadarinya, tetapi Safari dan Firefox akan mengabaikannya. Saya pikir itu mungkin CSS yang valid, tetapi Anda masih lebih baik dengan komentar bersyarat; hanya menggunakannya untuk kesederhanaan.
  • Seperti yang bisa saya katakan, satu-satunya vertical-alignpernyataan yang konsisten di seluruh browser adalah vertical-align: bottom. Pengaturan ini dan kemudian posisi relatif ke atas berperilaku hampir identik di Safari, Firefox dan IE dengan hanya satu atau dua piksel perbedaan.
  • Masalah utama dalam bekerja dengan penyelarasan adalah bahwa IE menempel banyak ruang misterius di sekitar elemen input. Itu bukan padding atau margin, dan terkutuklah. Mengatur lebar dan tinggi pada kotak centang dan kemudian overflow: hiddenkarena beberapa alasan memotong ruang ekstra dan memungkinkan pemosisian IE untuk bertindak sangat mirip dengan Safari dan Firefox.
  • Bergantung pada ukuran teks Anda, Anda pasti perlu menyesuaikan posisi relatif, lebar, tinggi, dan sebagainya untuk mendapatkan hal-hal yang terlihat benar.

Semoga ini bisa membantu orang lain! Saya belum mencoba teknik khusus ini pada proyek apa pun selain yang saya kerjakan pagi ini, jadi pasti pipa jika Anda menemukan sesuatu yang bekerja lebih konsisten.


8
catatan. Anda mungkin harus meletakkan atribut "untuk" pada label Anda, untuk memastikan itu berfungsi untuk semua browser dan pembaca teks. (Saya sadar Anda mungkin mengabaikannya untuk kesederhanaan)
Armstrongest

306
Astaga, saya tidak menyadari berapa banyak orang yang tidak tahu tentang ini: jika Anda membungkus input dalam label tag, atribut "untuk" tidak diperlukan. Silakan melihat sendiri: w3.org/TR/html401/interact/forms.html#h-17.9.1
One Crayon

10
Saya tidak setuju dengan saran tentang penggunaan komentar bersyarat. Tetap gunakan * foobar CSS hack. Itu bekerja dengan baik, digunakan oleh kerangka kerja seperti YUI, dan memungkinkan Anda untuk menyatukan apa yang menjadi milik bersama.
ebruchez

50
Sudah mencoba ini di Chrome 28, Mac OSX, dan kotak centang tampak lebih rendah dari teks
MusikAnimal

9
Catatan, ini tampaknya tidak berfungsi di versi terbaru Chrome (Saya menggunakan v36). i.imgur.com/y9Ffxsh.png Edit: atau Firefox (v31)
Hans

214

Kadang-kadang vertikal-align membutuhkan dua elemen inline (span, label, input, dll ...) di samping satu sama lain agar berfungsi dengan baik. Kotak centang berikut dipusatkan dengan benar di IE, Safari, FF, dan Chrome, meskipun ukuran teks sangat kecil atau besar.

Mereka semua mengapung di sebelah satu sama lain di baris yang sama, tetapi nowrap berarti bahwa seluruh teks label selalu berada di sebelah kotak centang.

Kelemahannya adalah tag SPAN ekstra yang tidak berarti.

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

Sekarang, jika Anda memiliki teks label yang sangat panjang yang perlu dibungkus tanpa membungkus di bawah kotak centang, Anda akan menggunakan teks teks padding dan negatif pada elemen label:

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


19
Terima kasih! "Vertikal-align: middle" pada input dan span bekerja dengan baik untuk saya.
William Gross

6
display: block; float: left;tampaknya berlebihan
PHPst

4
Anda tidak harus menggunakan atribut for ketika Anda memiliki input di dalam label. Itu bekerja tanpa itu.
Tommy Sørensen

6
Ini harus menjadi jawaban yang diterima menurut pendapat saya. Tidak diperlukan penyesuaian.
Tim

4
Luar biasa dan dikonfirmasi masih berfungsi di Chrome 58 (Windows) (tidak seperti jawaban teratas saat ini).
Jason C

188

Bekerja dari solusi One Crayon , saya memiliki sesuatu yang bekerja untuk saya dan lebih sederhana:

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

Render pixel-for-pixel yang sama di Safari (yang dasar saya percaya) dan baik Firefox dan IE7 memeriksa baik. Ini juga berfungsi untuk berbagai ukuran font label, besar dan kecil. Sekarang, untuk memperbaiki garis dasar IE pada seleksi dan input ...


Pembaruan: (Edit Pihak Ketiga)

Posisi yang tepat bottomtergantung pada font-family dan ukuran font! Saya menemukan menggunakan bottom: .08em;untuk kotak centang & elemen radio adalah nilai umum yang baik. Saya mengujinya di Chrome / Firefox / IE11 di windows dengan font Arial & Calibri menggunakan beberapa ukuran font kecil / sedang / besar.

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


10
Hanya catatan untuk orang lain: ini tidak akan berfungsi di IE6 karena tidak mendukung penargetan CSS [type = checkbox].
Satu Krayon

3
Anda bisa menambahkan kelas alih-alih menggunakan pemilih yang tidak didukung jika dukungan IE6 diperlukan.
HartleySan

1
Yang ini berhasil untuk saya. Namun, alih-alih mengatur "posisi: relatif; bawah: 1px", Anda dapat menggunakan "margin: 0 0 1px 0" untuk mencapai hasil yang sama.
pemain baru

142

Satu hal mudah yang tampaknya berfungsi dengan baik adalah menerapkan penyesuaian posisi vertikal kotak centang dengan penyelarasan vertikal. Itu masih akan bervariasi di seluruh browser, tetapi solusinya tidak rumit.

input {
    vertical-align: -2px;
}

Referensi


9
Itu adalah perubahan terkecil di antara semua yang lain, yang bekerja untuk saya di sebagian besar versi browser terbaru.
Johnny_D

6
Itu bekerja lebih baik daripada dengan vertical-aligndan position: relativekarena itu juga bekerja di IE9 dengan benar :)
Dennis98

5
tetapi itu tergantung pada ukuran font. untuk ukuran font yang besar, itu harus disesuaikan dengan nilai negatif yang lebih tinggi, misalnya: perataan vertikal: -6px;
S.Serpooshan

1
agaknya ini bisa bekerja lebih baik dengan font yang berbeda jika diaturem
YakovL

92

mencoba vertical-align: middle

juga kode Anda sepertinya:

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


<label for="blah">hanya diperlukan jika Anda menggunakan sesuatu yang tidak masuk akal untuk dibungkus label (seperti kotak teks; Saya biasanya akan menggunakan <label for="blah">Foo</label><input id="blah" type="text" />contoh itu). Dengan kotak centang, saya merasa lebih sedikit markup untuk membungkusnya.
Satu Krayon

13
Tidak sepenuhnya benar: Label-for akan memungkinkan pengguna mengklik label untuk memeriksa kotak centang, selain hanya mengklik kotak centang itu sendiri. Ini cukup berguna untuk mengikat kedua elemen bersama.
EndangeredMassa

26
Jika input bersarang di dalam label, lalu mengklik label dengan mengaktifkan / memberikan fokus pada input; atribut untuk semata-mata untuk kasus ketika input tidak bersarang.
Satu Krayon

3
Itu benar Satu Crayon, tapi masih praktek yang baik untuk menggunakan "untuk" atribut, atau Anda akan memiliki masalah dengan beberapa browser yang tidak mengenali sintaks ini batuk IE.
Armstrongest

jika Anda tidak ingin kotak centang Anda memiliki ID maka Anda harus membungkus kotak centang di dalam label
Simon_Weaver

39

Coba solusi saya, saya mencobanya di IE 6, FF2 dan Chrome dan itu membuat piksel demi piksel di ketiga 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>


3
Menarik; Saya suka ide melayang kedua elemen; yang secara elegan memperbaiki masalah pembungkus. Aku sedang melekat membungkus input dengan label, tapi kode yang heck of a jauh lebih bersih daripada solusi saya tiba di.
Satu Krayon

dalam contoh ini input checkbox dan label harus juga memiliki tampilan properti: block dan dalam kasus seperti mereka akan diperlakukan sebagai ini DIV normal yang dapat disejajarkan dengan mudah
se_pavel

5
ini memiliki masalah, apa yang terjadi jika label tidak sesuai dengan ruang yang tersedia? label dan kotak centang dipisahkan (kotak centang di kanan atas, dan label di kiri bawah). Jika Anda membungkus kotak centang di dalam label Anda, Anda tidak memiliki masalah ini.
Enrique

Itu tidak bekerja untuk pixel, tapi itu cukup layak untuk membuat sesuatu terlihat lebih baik di 3 browser utama. Saya kira saya bisa menghabiskan satu jam lagi untuk melihat bahwa itu akan bekerja lebih baik ...
Alexis Wilke

26

Satu-satunya solusi yang berfungsi dengan baik bagi saya adalah:

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

Diuji hari ini di Chrome, Firefox, Opera, IE 7 dan 8. Contoh: Fiddle


22

Saya belum sepenuhnya menguji solusi saya, tetapi tampaknya berhasil dengan baik.

HTML saya sederhana:

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

Saya kemudian mengatur semua kotak centang 24pxuntuk tinggi dan lebar. Untuk membuat teks sejajar, saya membuat label line-heightjuga 24pxdan menetapkan vertical-align: top;seperti:

EDIT: Setelah pengujian IE saya menambahkan vertical-align: bottom;input dan mengubah CSS label. Anda mungkin menemukan Anda membutuhkan case css IE bersyarat untuk memilah padding - tetapi teks dan kotak 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;
}
<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>

Jika ada yang menemukan bahwa ini tidak berhasil, mohon beri tahu saya. Ini dia beraksi (di Chrome dan IE - permintaan maaf karena tangkapan layar diambil pada retina dan menggunakan paralel untuk IE):

tangkapan layar kotak centang: Chrome tangkapan layar kotak centang: IE


1
Ini cukup lama, tetapi karena Anda diminta memberi tahu Anda, ini tidak berfungsi dengan baik di FireFox (kotak centang di atas garis dasar). Anda mungkin tertarik dengan penjelasan terperinci yang saya
pasang

20

Saya biasanya menggunakan ketinggian garis untuk menyesuaikan posisi vertikal teks statis saya:

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>

Semoga itu bisa membantu.


tinggi garis, ya. Selalu lupakan yang itu. Kerja bagus, kerja bagus.
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>

Caranya adalah dengan menggunakan perataan vertikal hanya dalam sel tabel atau blok inline jika menggunakan tag label.


11

Akhirnya mari kita lihat sumber masalahnya

Kotak centang diberikan menggunakan gambar (satu dapat mengatur yang khusus melalui CSS). Berikut adalah kotak centang (tidak dicentang) di FireFox, disorot dengan inspektur DOM:

hanya persegi

Dan inilah kotak centang tanpa gaya yang sama di Chrome:

ini adalah bujur sangkar tak terpusat dengan "margin" di kanan dan di bawah

Anda dapat melihat margin (oranye); padding tidak ada (akan ditampilkan hijau). Jadi, apa margin palsu ini di sebelah kanan dan di bawah kotak centang? Ini adalah bagian dari gambar yang digunakan untuk kotak centang . Itu sebabnya menggunakan hanya vertical-align: middletidak cukup dan itu adalah sumber masalah lintas-browser.

Jadi apa yang bisa kita lakukan tentang ini?

Salah satu opsi yang jelas adalah - ganti gambar! Untungnya, seseorang dapat melakukan ini melalui CSS dan menggantinya dengan gambar eksternal, gambar base64 (in-CSS), in-CSS svg atau hanya elemen pseudo. Ini adalah pendekatan yang kuat (lintas browser!), Dan ini adalah contoh penyesuaian yang dicuri dari pertanyaan ini :

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

Anda mungkin ingin membaca lebih banyak artikel mendalam tentang gaya seperti itu seperti beberapa yang tercantum di sini ; itu di luar jangkauan jawaban ini.

Ok, masih bagaimana dengan solusi no-custom-images-or-pseudo-elements?

TL; DR: sepertinya ini tidak akan berfungsi, gunakan kotak centang khusus sebagai gantinya

Pertama, mari kita perhatikan bahwa jika di browser lain ikon pseudo-margin di dalam kotak centang itu berubah-ubah, tidak ada solusi yang konsisten. Untuk membangunnya, kita harus menjelajahi anatomi gambar seperti itu di browser yang ada.

Jadi browser apa yang memiliki margin semu di kotak centang? Saya sudah memeriksa Chrome 75, Vivaldi 2.5 (berbasis Chromium), FireFox 54 (jangan tanya kenapa ketinggalan jaman), IE 11, Edge 42, Safari ?? (meminjam satu menit, lupa memeriksa versinya). Hanya Chrome dan Vivaldi yang memiliki margin semu seperti itu (saya menduga semua browser berbasis Chromium juga, seperti Opera).

Berapa ukuran margin semu itu? Untuk mengetahui ini, orang dapat menggunakan kotak centang yang diperbesar:

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

hasil saya adalah ~ 7% dari lebar / tinggi dan karenanya 0,9-1.0px dalam satuan absolut. Akurasi mungkin dipertanyakan, meskipun: coba nilai yang berbeda zoomuntuk kotak centang. Dalam pengujian saya di Chrome dan Vivaldi, ukuran relatif dari margin semu sangat berbeda pada zoomnilai 10, 20 dan pada nilai 11-19 (??):

untuk zoom = 10 7% sedangkan untuk zoom = 11 hampir dua kali lipat nilainya

scale tampaknya lebih konsisten:

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

jadi mungkin ~ 14% dan 2px adalah nilai yang benar.

Sekarang kita tahu (?) Ukuran pseudo-margin, mari kita perhatikan ini tidak cukup. Apakah ukuran ikon kotak centang sama untuk semua browser? Sayang! Inilah yang diperlihatkan oleh pemeriksa DOM untuk kotak centang yang tidak distilasi:

  • FireFox: 13.3px
  • Berbasis kromium: 12.8px untuk semuanya, karenanya 12.8 (100% - 14%) = 11px untuk apa yang secara visual dianggap sebagai kotak centang
  • IE 11, Edge: 13px
  • Safari: n / a (ini harus dibandingkan pada layar yang sama, saya percaya)

Sekarang sebelum kita membahas solusi atau trik, mari kita tanyakan: apa yang benar penyelarasan yang ? Apa yang ingin kita capai? Untuk titik tertentu itu masalah selera, tetapi pada dasarnya saya bisa memikirkan aspek "bagus" berikut:

teks dan kotak centang pada baseline yang sama (saya sengaja tidak menyesuaikan ukuran kotak centang di sini):

masukkan deskripsi gambar di sini

atau memiliki garis tengah yang sama dalam hal huruf kecil:

masukkan deskripsi gambar di sini

atau garis tengah yang sama dalam hal huruf kapital (lebih mudah untuk melihat perbedaan untuk ukuran font yang berbeda):

masukkan deskripsi gambar di sini

dan juga kita harus memutuskan apakah ukuran kotak centang harus sama dengan tinggi huruf kecil, huruf besar atau yang lain (lebih besar, lebih kecil atau antara huruf kecil dan kapital).

Untuk diskusi ini, mari panggil alignment nice jika kotak centang berada pada baseline yang sama dengan teks dan memiliki ukuran huruf kapital (pilihan yang sangat diperdebatkan):

masukkan deskripsi gambar di sini

Sekarang alat apa yang harus kita miliki:

  1. sesuaikan ukuran kotak centang
  2. mengenali Chromium dengan kotak centang pseudo-margined dan mengatur gaya tertentu
  3. sesuaikan kotak centang / label perataan vertikal

?

  1. Mengenai ukuran kotak centang penyesuaian : ada width, height, size, zoom, scale(memiliki aku melewatkan sesuatu?). zoomdan scalejangan izinkan untuk mengatur ukuran absolut, sehingga mereka hanya dapat membantu dengan menyesuaikan ke ukuran teks, tidak mengatur ukuran lintas-browser (kecuali kita dapat menulis aturan khusus browser). sizetidak bekerja dengan Chrome (apakah itu bekerja dengan IE lama? Lagi pula, itu tidak menarik). widthdan heightbekerja di Chrome dan peramban lain, sehingga kami dapat menetapkan ukuran umum, tetapi sekali lagi, di Chrome itu menetapkan ukuran seluruh gambar, bukan kotak centang itu sendiri. Catatan: minimum (lebar, tinggi) yang menentukan ukuran kotak centang (jika lebar ≠ tinggi, area di luar kotak centang ditambahkan ke "pseudo-margin").

    Sayangnya, pseudo-margin di kotak centang Chrome tidak disetel ke nol untuk lebar dan ketinggian apa pun, sejauh yang saya bisa lihat.

  2. Saya khawatir tidak ada metode hanya CSS yang dapat diandalkan hari ini.

  3. Mari kita pertimbangkan perataan vertikal. vertical-aligntidak dapat memberikan hasil yang konsisten ketika disetel ke middleatau baselinekarena margin semu Chrome, satu-satunya opsi nyata untuk mendapatkan "sistem koordinat" yang sama untuk semua browser adalah menyelaraskan label dan input ke top:

    membandingkan vertical-align: atas dan bawah

    (pada gambar: penyelarasan vertikal: atas, bawah dan bawah tanpa bayangan kotak)

Jadi apa hasil yang kita dapatkan dari ini?

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

Cuplikan di atas berfungsi dengan Chrome (browser berbasis Chromium), tetapi browser lain memerlukan ukuran yang lebih kecil dari kotak centang. Tampaknya tidak mungkin untuk menyesuaikan ukuran dan perataan vertikal dengan cara yang bekerja di sekitar kekhasan gambar kotak centang Chromium. Saran terakhir saya adalah: gunakan kotak centang khusus - dan Anda akan menghindari frustrasi :)


Jawaban ini sangat dalam!
Marecky

10

Sekarang flexbox didukung di semua browser modern, sesuatu seperti ini sepertinya pendekatan yang lebih mudah bagi saya.

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


Inilah demo versi awalan lengkap:


10

Saya pikir ini adalah cara termudah

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


pertanyaannya adalah: apakah ini bekerja dengan baik di semua browser? ;-)
JonSnow

9

Saya tidak suka posisi relatif karena itu membuat elemen yang diberikan di atas segalanya pada levelnya (bisa mendapatkan di atas sesuatu jika Anda memiliki tata letak yang kompleks).

Saya telah menemukan yang vertical-align: submembuat kotak centang terlihat cukup baik selaras di Chrome, Firefox dan Opera. Tidak dapat memeriksa Safari karena saya tidak memiliki MacOS dan IE10 sedikit tidak aktif, tetapi saya merasa ini solusi yang cukup baik untuk saya.

Solusi lain mungkin untuk mencoba dan membuat CSS spesifik untuk setiap browser dan menyempurnakannya dengan beberapa penyelarasan vertikal dalam% / piksel / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/


Tampaknya berfungsi asalkan ukuran fontnya tidak terlalu besar.
robsch

9

Ini bekerja dengan baik untuk saya:

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>


8
memberkati Anda karena menggunakan ems bukan pxs.
IDisposable

7

Jawaban yang dipilih dengan 400+ upvotes tidak berfungsi untuk saya di Chrome 28 OSX, mungkin karena itu tidak diuji dalam OSX atau bahwa itu bekerja di apa pun di sekitar tahun 2008 ketika pertanyaan ini dijawab.

Waktu telah berubah, dan solusi CSS3 baru sekarang layak. Solusi saya menggunakan pseudoelements untuk membuat kotak centang khusus . Jadi ketentuannya (pro atau kontra, namun Anda melihatnya) adalah sebagai berikut:

  • Hanya berfungsi di browser modern (FF3.6 +, IE9 +, Chrome, Safari)
  • Bergantung pada kotak centang yang dirancang khusus, yang akan diberikan persis sama di setiap browser / OS. Di sini saya baru saja memilih beberapa warna sederhana, tetapi Anda selalu bisa menambahkan gradien linier dan semacamnya untuk membuatnya lebih keren.
  • Ditujukan untuk font / ukuran font tertentu, yang jika diubah, Anda cukup mengubah posisi dan ukuran kotak centang agar tampak sejajar secara vertikal. Jika di-tweak dengan benar, hasil akhirnya harus tetap sama persis di semua browser / sistem operasi.
  • Tidak ada properti pelurusan vertikal, tidak ada pelampung
  • Harus menggunakan markup yang disediakan dalam contoh saya, itu tidak akan berfungsi jika terstruktur seperti pertanyaan, namun, tata letak pada dasarnya akan terlihat sama. Jika Anda ingin memindahkan berbagai hal, Anda juga harus memindahkan CSS yang terkait

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>

Solusi ini menyembunyikan kotak centang , dan menambah dan gaya pseudoelements ke label untuk membuat kotak centang yang terlihat. Karena label terkait dengan kotak centang tersembunyi, bidang input masih akan diperbarui dan nilai akan dikirimkan bersama formulir.

Dan jika Anda tertarik, inilah pendapat saya tentang tombol radio: http://jsfiddle.net/DtKrV/2/

Semoga seseorang menemukan ini berguna!


6

Saya tidak pernah memiliki masalah dengan melakukannya seperti ini:

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

4
Seperti yang saya katakan pada poster sebelumnya yang merekomendasikan itu: Saya tidak suka karena memerlukan markup yang tidak perlu. Juga, saya mencoba markup itu tetapi sulit untuk mencegah label membungkus di bawah input (sementara masing-masing masih memiliki label / kelompok input pada baris mereka sendiri).
Satu Crayon

7
Jadi, alih-alih markup "tidak perlu" (digunakan oleh hampir semua orang), Anda lebih suka memiliki CSS yang tidak perlu?
Robert C. Barth

10
Masalah dengan dudukan pembungkus. Tetapi secara umum, ya saya lebih suka memiliki CSS asing daripada markup karena CSS di-cache, tetapi markup mungkin harus dimuat lagi untuk setiap halaman baru.
Satu Krayon

4
Bandingkan: 1 instance CSS ekstra -vs- banyak contoh markup tambahan.
Greg

6

Jika Anda menggunakan Formulir Web ASP.NET Anda tidak perlu khawatir tentang DIV dan elemen lain atau ukuran tetap. Kami dapat menyelaraskan <asp:CheckBoxList>teks dengan mengatur float:leftke tipe input CheckboxList di CSS.

Silakan periksa kode contoh berikut:

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

.Aspx kode:

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

3

Jika Anda menggunakan Bootstrap Twitter, Anda bisa menggunakan checkboxkelas di <label>:

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

3

Dengan kotak centang tipe input yang dibungkus di dalam label dan melayang ke kiri seperti:

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

ini bekerja untuk saya:

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

Pastikan ketinggian identik dengan garis-tinggi (blocklevel).


3

Cetak kode tinggi dan lebar kotak centang, lepas padding-nya, dan buat tingginya ditambah margin vertikal sama dengan tinggi-line label. Jika teks label inline, apungkan kotak centang. Firefox, Chrome, dan IE7 + memberikan contoh berikut secara identik: http://www.kornea.com/css-checkbox-align


Bagus! Tetapi Anda harus mempertimbangkan menyalin kode HTML dan CSS di sini. Jawaban yang sangat tergantung pada tautan eksternal tidak disarankan. Tautan ini masih berharga untuk melihat hasilnya, tetapi saya pikir menunjukkan kode di sini akan membantu Anda mendapatkan lebih banyak suara.
Mariano Desanze

tidak, mereka tidak (bandingkan di FireFox dan di Chrome, di Chrome kotak centang di atas garis dasar), saya sudah menjelaskan mengapa
YakovL

Mengapa, Anda mengklaim hal yang tidak didukung bahkan dengan tangkapan layar dari kedua browser. Adalah tugas Anda untuk memberikan bukti klaim ketika Anda membuat satu, bukan yang lain untuk membantahnya. Saya memang membandingkannya dan akan menambahkan tangkapan layar, tetapi komentar tidak mendukung penambahan gambar; Anda dapat melihat gambar dalam jawaban saya. Namun ini mungkin berbeda dengan versi browser, jadi memberikan tangkapan layar dengan anotasi yang berisi versi browser akan sangat membantu.
YakovL

Kunjungi halaman yang saya tautkan di berbagai browser.
Vladimir Kornea

Jadi saya melakukan itu, bukan? :) Apakah kamu tidak melihat perbedaannya? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Sementara di FireFox mereka benar-benar selaras, di Chrome kotak centang adalah tentang baseline (omong-omong, Anda dapat menggunakan menyebutkan melalui @ jika Anda tertarik pada balasan lebih cepat)
YakovL

3

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


2

Saya biasanya meninggalkan kotak centang tanpa label dan kemudian membuat "label" nya sebagai elemen yang terpisah. Ini menyebalkan, tetapi ada banyak perbedaan antar browser antara bagaimana kotak centang dan labelnya ditampilkan (seperti yang Anda perhatikan) bahwa ini adalah satu-satunya cara saya bisa mengendalikan bagaimana segala sesuatu terlihat.

Saya juga akhirnya melakukan ini dalam pengembangan winforms, untuk alasan yang sama. Saya pikir masalah mendasar dengan kontrol kotak centang adalah bahwa itu benar-benar dua kontrol yang berbeda: kotak dan label. Dengan menggunakan kotak centang, Anda menyerahkannya kepada pelaksana kontrol untuk memutuskan bagaimana kedua elemen tersebut ditampilkan di sebelah satu sama lain (dan mereka selalu salah, di mana salah = bukan apa yang Anda inginkan).

Saya sangat berharap seseorang memiliki jawaban yang lebih baik untuk pertanyaan Anda.


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>

Kode di atas akan menempatkan item daftar Anda dalam threecol dan hanya mengubah lebar sesuai.


2

Berikut ini memberikan konsistensi pixel-sempurna di seluruh browser, bahkan IE9:

Pendekatannya cukup masuk akal, sampai-sampai jelas:

  1. Buat input dan label.
  2. Tampilkan sebagai blok, sehingga Anda dapat mengapungkannya sesuka Anda.
  3. Atur tinggi dan tinggi garis ke nilai yang sama untuk memastikan mereka memusat dan sejajar secara vertikal.
  4. Untuk pengukuran em , untuk menghitung ketinggian elemen, browser harus mengetahui ketinggian font untuk elemen-elemen itu, dan itu sendiri tidak harus diatur dalam pengukuran em.

Ini menghasilkan aturan umum yang berlaku secara global:

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

Dengan ukuran font yang dapat disesuaikan per formulir, bidang, atau elemen.

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

Diuji di Chrome, Safari, dan Firefox terbaru di Mac, Windows, Iphone, dan Android. Dan IE9.

Metode ini kemungkinan berlaku untuk semua jenis input yang tidak lebih tinggi dari satu baris teks. Terapkan aturan jenis yang sesuai.


hm, ini memang terlihat baik ketika label dimulai dengan huruf kecil, tetapi jika dimulai dengan huruf kapital, itu jauh lebih buruk. Bisakah Anda menambahkan potongan di sini?
YakovL

2

Jadi saya tahu ini telah dijawab berkali-kali, tetapi saya merasa saya memiliki solusi yang jauh lebih elegan daripada yang sudah disediakan. Dan bukan hanya 1 solusi elegan, tapi 2 solusi terpisah untuk menggelitik kesukaan Anda. Dengan itu, semua yang perlu Anda ketahui dan lihat terkandung dalam 2 JS Fiddle, dengan komentar.


Solusi # 1 bergantung pada "Kotak centang" asli dari browser yang diberikan, meskipun dengan twist ... Yang terkandung dalam div yang lebih mudah untuk memposisikan cross-browser, dengan overflow: disembunyikan untuk memotong kelebihan kotak centang 1px membentang (Ini agar Anda tidak bisa melihat batas FF yang jelek)

HTML sederhana: (ikuti tautan untuk meninjau css dengan komentar, blok kode adalah untuk memenuhi stackoverflow) http://jsfiddle.net/KQghJ/

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

Solusi # 2 menggunakan "Checkbox Toggle Hack" untuk beralih keadaan CSS dari DIV, yang telah diposisikan dengan benar di seluruh browser, dan setup dengan sprite sederhana untuk kotak centang tidak dicentang dan diperiksa. Semua yang diperlukan adalah menyesuaikan posisi latar belakang dengan kata Checkbox Toggle Hack. Ini, menurut saya, adalah solusi yang lebih elegan karena Anda memiliki kontrol lebih besar atas kotak centang & radio Anda, dan dapat menjamin semuanya terlihat sama di seluruh browser.

HTML sederhana: (ikuti tautan untuk mengulas CSS dengan komentar, blok kode adalah untuk memuaskan StackOverflow) http://jsfiddle.net/Sx5M2/

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

Jika ada yang tidak setuju dengan metode ini, silakan tinggalkan saya komentar, saya akan senang mendengar umpan balik tentang mengapa orang lain belum menemukan solusi ini, atau jika mereka punya, mengapa saya tidak melihat jawaban di sini mengenai mereka? Jika ada yang melihat salah satu dari metode ini gagal, akan menyenangkan untuk melihatnya juga, tetapi ini telah diuji di browser terbaru dan mengandalkan metode HTML / CSS yang cukup lama, dan universal sejauh yang saya lihat.


1

Yay terima kasih! Ini juga telah membuatku gila selamanya.

Dalam kasus khusus saya, ini bekerja untuk saya:

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

Saya menggunakan reset.css yang mungkin menjelaskan beberapa perbedaan, tetapi ini tampaknya bekerja dengan baik untuk saya.


1

position: relative; memiliki beberapa masalah di IE dengan z-index dan animasi seperti 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');
    }
});

Penataan mungkin membutuhkan penyesuaian tergantung pada ukuran font yang digunakan <label>

PS:
Saya menggunakan ie7js untuk membuat css bekerja di IE6.


1

Gunakan sederhana vertical-align: sub, seperti pokrishka sudah disarankan.

Biola

Kode HTML:

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

Kode CSS:

.checkboxes input {
    vertical-align: sub;
}

1

Solusi sederhana:

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

Diuji di Chrome, Firefox, IE9 +, Safari, iOS 9+

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.