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

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?

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

select::-ms-expand {
    display: none;
}

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

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>

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/

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;
}

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.

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;
}

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;
}

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;

}

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

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/

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>