Saya ingin menghapus panah dropdown dari <select>
elemen HTML . Sebagai contoh:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
Bagaimana cara melakukannya di Opera, Firefox dan Internet Explorer?
html
css
drop-down-menu
html-select
pengguna2301515
sumber
sumber
#slectType { -webkit-appearance: none; appearance: none /*menulist*/
!; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}
Alis penting [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];Jawaban:
Tidak perlu untuk hacks atau overflow. Ada elemen pseudo untuk panah dropdown di IE:
sumber
Solusi yang disebutkan sebelumnya bekerja dengan baik dengan chrome tetapi tidak pada Firefox.
Saya menemukan Solusi yang berfungsi baik di Chrome dan Firefox (bukan pada IE). Tambahkan atribut berikut ke CSS untuk SELECTelement Anda dan sesuaikan margin-top sesuai dengan kebutuhan Anda.
Semoga ini membantu :)
sumber
Cara mudah untuk menghapus panah drop down dari pilih
sumber
appearance: none
untuk Chrome dan Firefox Quantum (v59 dan lebih tinggi). Yaitu tidak perlu vendor awalan lagi .appearance: none
untuk bekerja. Sebagian besar browser masih membutuhkan awalan.Coba ini :
Bin JS: http://jsbin.com/aniyu4/2/edit
Jika Anda menggunakan Internet Explorer:
Atau Anda dapat menggunakan Choosen: http://harvesthq.github.io/chosen/
sumber
Coba ini:
HTML:
CSS:
sumber
Coba ini bekerja untuk saya,
Anda tidak bisa menyembunyikan tetapi menggunakan overflow tersembunyi Anda sebenarnya bisa membuatnya menghilang.
sumber
Hanya ingin menyelesaikan utas. Untuk menjadi sangat jelas ini tidak berfungsi di IE9, namun kita dapat melakukannya dengan sedikit trik css.
sumber
Seperti yang saya jawab di Hapus Pilih panah pada IE
Jika Anda ingin menggunakan kelas dan pseudo-class:
.simple-control
adalah kelas css Anda:disabled
adalah kelas semusumber
}
sumber
Anda tidak dapat melakukan ini dengan dukungan lintas browser yang berfungsi penuh.
Coba ambil div 50 piksel anggap dan apungkan ikon tarik-turun yang diinginkan dari pilihan Anda di sebelah kanan ini
Sekarang di dalam div itu, tambahkan tag pilih dengan lebar 55 piksel mungkin (sesuatu lebih dari lebar wadah itu)
Saya pikir Anda akan mendapatkan apa yang Anda inginkan.
Jika Anda tidak ingin ada ikon drop di sebelah kanan, lakukan saja semua langkah kecuali untuk melayang gambar di sebelah kanan. Tetapkan garis besar: 0 pada fokus untuk tag pilih. itu dia
sumber
ada perpustakaan bernama DropKick.js yang menggantikan dropdown pilih normal dengan HTML / CSS sehingga Anda dapat sepenuhnya gaya dan mengontrolnya dengan javascript. http://dropkickjs.com/
sumber
Berfungsi untuk semua browser dan semua versi:
JS
HTML
sumber