de-vraag
Lebih
Question

CSS Pilih gaya panah kotak pilihan

Saya ingin menghapus panah default dari kotak pilihan dan ingin menggunakan ikon khusus. Dari jawaban-jawaban sebelumnya di SO, saya telah menemukan bahwa hal itu tidak mungkin (untuk membuatnya bekerja dengan browser-browser utama). Satu-satunya kemungkinan adalah membungkus pilihan di dalam div, dan mengatur lebarnya lebih dari lebar div dan pengaturan overflow: hidden. Saya mencoba mengikuti, tetapi tidak berhasil. Apa yang saya lakukan salah?

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 30px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>

JSFiddle:

Peter B
Peter B
Pertanyaan edit 11 April 2018 в 7:41
Pemrograman
css3
html
css

Silakan ikuti cara seperti di bawah ini:

.selectParent {
    width:120px;
    overflow:hidden;   
}
.selectParent select { 
    display: block;
    width: 100%;
    padding: 2px 25px 2px 2px; 
    border: none; 
    background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat; 
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none; 
}
.selectParent.left select {
    direction: rtl;
    padding: 2px 2px 2px 25px;
    background-position: left center;
}
/* for IE and Edge */ 
select::-ms-expand { 
    display: none; 
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>
<br />
<div class="selectParent left">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>
1

Cobalah untuk mengganti

padding: 2px 30px 2px 2px;

dengan

padding: 2px 2px 2px 2px;

Seharusnya bisa berfungsi.

0
Related communities 5
HTML dan CSS Indonesia
4 094 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
306 pengguna
Official Website : www.pemweb.id Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
HTML INDONESIA
109 pengguna
PHP HTML Indonesia
59 pengguna
~ Menerima Jasa Pembuatan Website untuk : Tugas & Instansi 💻 ~ Forum Diskusi Belajar Bersama ✅ ~ Promosi Jasa Minimal 1x Sehari ✅ ~ Dilarang Berbicara Kotor 🚫 ^ Other Grup : Whatsapp Group : Chat Admin untuk masuk ke Grup Whatsapp ^^
Css Indonesia
19 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you