Pertanyaan Cara menyelaraskan kotak centang dan labelnya secara konsisten lintas-browser


Ini adalah salah satu masalah kecil CSS yang selalu mengganggu saya. Bagaimana orang-orang di sekitar Stack Overflow secara vertikal sejajar checkboxes dan mereka labels secara konsisten Lintas browser? Setiap kali saya menyelaraskan mereka dengan benar di Safari (biasanya menggunakan vertical-align: baseline pada input), mereka benar-benar mati di Firefox dan IE. Perbaiki di Firefox, dan Safari dan IE pasti kacau. Saya membuang waktu untuk ini setiap kali saya mengkodekan formulir.

Berikut kode standar yang saya gunakan:

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

Saya biasanya menggunakan pengaturan ulang Eric Meyer, jadi elemen formulir relatif bersih dari penggantian. Berharap ada tips atau trik yang Anda tawarkan!


1507


asal


Jawaban:


Setelah lebih dari satu jam tweaking, menguji, dan mencoba berbagai macam markup, saya pikir saya mungkin memiliki solusi yang layak. Persyaratan untuk proyek khusus ini adalah:

  1. Masukan harus berada di jalurnya sendiri.
  2. Masukan kotak-kotak harus sejajar secara vertikal dengan teks label yang sama (jika tidak identik) di semua browser.
  3. Jika teks label dibungkus, perlu diindentasi (jadi tidak membungkus di bawah kotak centang).

Sebelum saya masuk ke penjelasan apa pun, 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 kerja di JSFiddle.

Kode ini berasumsi bahwa Anda menggunakan reset seperti Eric Meyer yang tidak mengesampingkan bentuk margin input dan padding (karenanya menempatkan margin dan padding ulang pada input CSS). Tentunya dalam lingkungan hidup Anda mungkin akan bersarang / menimpa hal-hal untuk mendukung elemen masukan lainnya, tetapi saya ingin membuat semuanya tetap sederhana.

Hal-hal yang perlu diperhatikan:

  • Itu *overflow deklarasi adalah hack IE inline (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-align Pernyataan yang konsisten di seluruh browser itu 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 keselarasan adalah bahwa IE menempel banyak ruang misterius di sekitar elemen input. Bukan padding atau margin, dan itu sangat gigih. Menetapkan lebar dan tinggi pada kotak centang dan kemudian overflow: hidden untuk 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 yang benar.

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


914



Kadang-kadang vertical-align membutuhkan dua elemen inline (span, label, input, dll ...) di sebelah satu sama lain untuk bekerja dengan benar. Kotak centang berikut ini dipusatkan secara vertikal secara vertikal di IE, Safari, FF, dan Chrome, meskipun ukuran teks sangat kecil atau besar.

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

Kelemahannya adalah tag SPAN ekstra tidak berarti.

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

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

.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



Bekerja dari Satu solusi CrayonSaya memiliki sesuatu yang bekerja untuk saya dan lebih sederhana:

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>

Menetapkan pixel-untuk-pixel yang sama di Safari (yang saya percaya pada dasarnya) dan baik Firefox dan IE7 memeriksa sebagai baik. Ini juga berfungsi untuk berbagai ukuran font label, besar dan kecil. Sekarang, untuk memperbaiki baseline IE pada pilihan dan masukan ...


155



Satu hal mudah yang tampaknya berfungsi dengan baik adalah menerapkan penyesuaian posisi vertikal kotak centang dengan perataan vertikal. Ini akan tetap bervariasi di semua browser, tetapi solusinya tidak rumit.

input {
    vertical-align: -2px;
}

Referensi


117



mencoba vertical-align: middle

juga kode Anda sepertinya harus:

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


77



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>


36



Satu-satunya solusi sempurna untuk 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: Biola


24



Saya biasanya menggunakan tinggi 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 membantu.


16



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

HTML saya hanyalah:

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

Saya kemudian mengatur semua kotak centang 24px untuk tinggi dan lebar. Untuk membuat teks selaras saya membuat label itu line-height juga 24px dan tugaskan vertical-align: top; seperti ini:

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

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

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12



Saya pikir ini adalah cara termudah

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

Biola


9