Bagaimana cara menghapus ikon panah default dari daftar dropdown (elemen pilih)?

297

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?

masukkan deskripsi gambar di sini

pengguna2301515
sumber
Beberapa jawaban / retas untuk menyembunyikannya di Firefox - stackoverflow.com/questions/5912791/…
andyb
2
penampilan #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];
Yash
1
Kemungkinan duplikat panah Hapus Pilih pada IE
Muath
Kemungkinan duplikat sembunyikan HTML Pilih panah drop-down dengan css
Damjan Pavlica

Jawaban:

383

Tidak perlu untuk hacks atau overflow. Ada elemen pseudo untuk panah dropdown di IE:

select::-ms-expand {
    display: none;
}
nrutas
sumber
22
karena pertanyaannya adalah bagaimana cara menghapus panah dropdown di IE. IE9 tidak memiliki fungsi ini, tetapi ini berfungsi di IE10. jadi kecuali Anda menggunakan windows XP, Anda harus tetap menggunakan IE10. IE11 hampir keluar. Pilihan lainnya adalah hack CSS jelek untuk menyembunyikan tombol dropdown yang sebenarnya dan buat sendiri.
nrutas
2
tautan di sini adalah retas buruk untuk menyembunyikan overflow
nrutas
1
Bekerja di IE11. Gracias!
ConorLuddy
Ini tidak berfungsi di Firefox. Gunakan solusi Varun Rathore di bawah ini untuk Firefox.
AlmostPitt
1
ini hanya untuk IE. tentu saja itu tidak akan berfungsi di Firefox.
nrutas
289

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.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

Semoga ini membantu :)

Varun Rathore
sumber
9
Trik ini berhenti bekerja di Firefox pada versi 31 (di Nightly build per Mei 2014). Mari kita lihat apa yang bisa dilakukan sementara itu. Intisari yang saya tulis ini memiliki lowdown penuh: gist.github.com/joaocunha/6273016
João Cunha
Metode Joäo Cunha diperiksa dan digunakan dengan sukses. Saat Anda memeriksanya, jangan lupa untuk membuka tautan di firefox!
NoobishPro
Ini berhasil untuk saya. Saya ingin menggunakannya untuk wkhtmltopdf untuk menghasilkan pdf dari html. Terima kasih
Faisal
187

Cara mudah untuk menghapus panah drop down dari pilih

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Shah Sangeet
sumber
4
Saya hanya menggunakan appearance: noneuntuk Chrome dan Firefox Quantum (v59 dan lebih tinggi). Yaitu tidak perlu vendor awalan lagi .
CPHPython
2
@CPHPython Sebagian besar peramban pada komentar ini masih memiliki tag "dukungan parsial dengan awalan" pada mereka ...
Dan
2
@ CPHPython Anda harus memiliki Autoprefixer diinstal pada proyek Anda agar tidak diperbaiki appearance: noneuntuk bekerja. Sebagian besar browser masih membutuhkan awalan.
Daniel Tonon
@DanielTonon oh, mungkin saya menggunakan beberapa paket postcss seperti itu. Saya tidak ingat persis, tapi saya pikir saya memeriksa inspektur browser sebelum berkomentar.
CPHPython
58

Coba ini :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

Bin JS: http://jsbin.com/aniyu4/2/edit

Jika Anda menggunakan Internet Explorer:

select {
    overflow:hidden;
    width: 120%;
}

Atau Anda dapat menggunakan Choosen: http://harvesthq.github.io/chosen/

EpokK
sumber
1
Apakah Anda menguji JSBin Anda di IE dan firefox? Saya masih melihat panah tarik-turun bawaan di keduanya.
Martin Smith
Periksa dengan Terpilih, saya pikir itu pilihan terbaik.
EpokK
"Jika Anda menggunakan Internet Explorer"? Anda perlu mempertimbangkan% besar populasi yang DO menggunakan IE dan memenuhi kebutuhan mereka
Danny Mahoney
Statistik pengguna situs kami adalah sebagai berikut: 5,21% IE atau 2,37% Tepi
nu everest
"Jika Anda menggunakan IE" akan benar, akan lebih cocok untuk mengatakan "Jika Anda perlu mendukung IE" tetapi di zaman sekarang ini, teknologi Anda harus ditargetkan dengan tepat kepada audiens Anda, jika Anda menjalankan web situs web yang ditargetkan pengembang maka saya ragu Anda akan perlu untuk mendukung versi IE APAPUN.
Brandito
17

Coba ini:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
Luke Kalyan Brata Sarker
sumber
15

Coba ini bekerja untuk saya,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Anda tidak bisa menyembunyikan tetapi menggunakan overflow tersembunyi Anda sebenarnya bisa membuatnya menghilang.

Mahesh Shitole
sumber
6

Hanya ingin menyelesaikan utas. Untuk menjadi sangat jelas ini tidak berfungsi di IE9, namun kita dapat melakukannya dengan sedikit trik css.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
sun2
sumber
5

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 semu

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}
Tejasvi Hegde
sumber
4
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Mitul
sumber
2

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

Kaustav Banerjee
sumber
1
Saya tidak bisa mendapatkan bantuan dari petunjuk ini. Adakah yang bisa memberikan kode yang memadai di sini? Terima kasih.
user2301515
2

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/

nrutas
sumber
2

Berfungsi untuk semua browser dan semua versi:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
SK.
sumber