Pertanyaan Text Padding di Select Boxes


Saya baru saja mengalami masalah yang tidak jelas select kotak yang memiliki ruang tambahan di sekitar teks yang tidak tampak sebagai bagian dari model kotak. Berikut dua gambar yang saya maksud:

Select Box Padding Test

Select Box Padding Test 2

Berikut ini contohnya terjadi (di JSFiddle) atau Anda dapat melihat sumber ke contoh saya di bawah ini:

select, input
{
	padding:0px;
	font-size:20px;
}
select.textIndent
{
	text-indent:-1.5px;
}
select.paddingOffset
{
	padding-left:2.5px;
}
input.paddingOffset
{
	padding-left:5px;
}
<h3>No Padding Test</h3>
<select>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />

Saya sudah mencoba dua metode untuk mencoba mengatasinya, baik dengan cara negatif text-indent atau menggunakan padding kiri untuk menyesuaikan input dan select kotak untuk disesuaikan.

Kedua metode ini tidak sempurna. Ada perbedaan antara yang negatif text-indent untuk Chrome dan Firefox yang menghasilkan ruang yang nyata jika select dan input berbaris satu demi satu. Mencoba untuk mengimbangi padding dapat membuat mempertahankan gaya dari berbagai input dan select bidang agak sulit di mana Anda menerapkan persentase padding.

Saya pertama kali melihatnya di situs web klien di mana bagian dari kata itu telah dipotong tetapi jika ruang kosong itu tidak ada di sana, kata itu terlihat seperti itu akan cocok.

Client example of the issue

Sementara saya dapat mengatasi masalah khusus ini untuk klien saya (mis. Lebih luas select box, less padding), saya ingin tahu apakah ada solusi yang berbeda untuk menyembunyikan / offsetting / menghapus "lain" padding di sebelah kiri / kanan teks. Apakah ada properti CSS lain yang harus saya perhatikan?

Saya punya perasaan ini mungkin hanya bagaimana select kotak bekerja tetapi ingin sarang kolektif SO untuk membuktikan saya salah.

Edit 1

Saya berharap solusinya adalah CSS murni. Saya tahu bahwa jika saya menggunakan pengganti drop-in untuk a select kotak menggunakan pustaka JS, tidak akan memiliki masalah yang sama.

Edit 2

Hanya untuk lebih memperjelas apa yang saya cari, select kotak memiliki padding tambahan di luar model kotak. Gambar-gambar di bawah ini menunjukkan 6 piksel untuk select kotak dan ~ 3px untuk input. Saya ingin mengontrol padding ini atau menghapusnya sepenuhnya. Saya sudah mencoba text-indent dan menggunakan offset padding untuk menyelaraskan teks dalam input dan select elemen tetapi keduanya tampaknya bersifat peretas. Saya pikir ada cara CSS yang lebih baik untuk melakukan hal ini.

Example Clarified 1

Example Clarified 2


32
2017-11-18 23:44


asal


Jawaban:


Sayangnya, spasi ekstra ini ditambahkan oleh mesin rendering browser. Rendering elemen formulir tidak konsisten di seluruh browser, dan dalam hal ini tidak ditentukan oleh CSS.

Melihat artikel ini dari Mozilla menjelaskan beberapa cara untuk mengurangi ketidaksesuaian kotak pilih, maka Anda mungkin membaca artikel ini dari Smashing Magazine tentang elemen bentuk styling (pastikan untuk memeriksa komentar dan masalah yang dimiliki orang dengan memilih).


21
2017-11-19 00:18



Padding yang Anda lihat berasal dari stylesheet khusus browser. Di chrome, atribut yang bertanggung jawab untuk menata dropdown ini -webkit-appearance, di firefox itu -moz-appearance 

Anda dapat menstandarisasi tampilan menu pilihan Anda dengan melakukan hal berikut:

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

catatan: ini tidak akan menghasilkan hasil yang bagus, hanya memberi Anda padding / spasi standar di kotak pilihan Anda. Untuk mendapatkan tampilan kotak yang bagus dan dapat dikustomisasi, Anda dapat sepenuhnya mengontrol padding / ukuran dll. Ada banyak sekali tutorial di luar sana. Ini adalah salah satu yang saya temukan setelah pencarian google cepat:

http://www.htmllion.com/default-select-dropdown-style-just-css.html


11
2017-11-19 00:06



Apa yang memecahkan masalah ini untuk saya adalah menimpa atribut "box-sizing" Chrome pada kotak terpilih. Ini memiliki "border-box" - dan saya mengesampingkan itu dan menggunakan "content-box"


-3
2018-05-17 21:34



Untuk mengedit kotak pilih Anda harus menggunakan jQuery (atau javascript pada umumnya).

Bagaimanapun, Anda dapat memecahkan masalah menggunakan "trik" ini:

http://jsfiddle.net/Clear/hwzd88o5/6/

Melihat:

select.textIndent
{
    height: 80px;
    line-height: 80px;
    width: 300px;
    padding-left: 50px !important;
}

;)


-4
2017-11-19 00:02



Coba ini. Itu berhasil bagi saya.

 <div id="div">
       <select size=1>
          <option value="0">Option 1</option>
          <option value="1">Option 2</option>
       </select>
  </div>

CSS

 #div option {padding-left: 5px;}

-4
2017-08-06 03:00