Cara menghapus panah dari elemen pilih di Firefox

Saya mencoba gaya selectelemen menggunakan CSS3. Saya mendapatkan hasil yang saya inginkan di WebKit (Chrome / Safari), tetapi Firefox tidak bermain dengan baik (Saya bahkan tidak peduli dengan IE). Saya menggunakan appearanceproperti CSS3 , tetapi untuk beberapa alasan saya tidak dapat menghilangkan ikon drop-down dari Firefox.

Inilah contoh apa yang saya lakukan: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Seperti yang Anda lihat, saya tidak mencoba sesuatu yang mewah. Saya hanya ingin menghapus gaya default dan menambahkan panah drop-down saya sendiri. Seperti yang saya katakan, hebat di WebKit, tidak hebat di Firefox. Rupanya, -moz-appearance: nonetidak menghilangkan item drop-down.

Ada ide? Tidak, JavaScript bukan opsi

Oke, saya tahu pertanyaan ini sudah tua, tetapi 2 tahun ke depan dan mozilla tidak melakukan apa-apa.

Saya telah menemukan solusi sederhana.

Ini pada dasarnya menghapus semua pemformatan kotak pilih di firefox dan membungkus elemen rentang di sekitar kotak pilih dengan gaya khusus Anda, tetapi seharusnya hanya berlaku untuk firefox.

Katakan ini adalah menu pilihan Anda:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

Dan mari kita asumsikan kelas css 'css-select' adalah:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

Di firefox, ini akan ditampilkan dengan menu pilih, diikuti oleh panah pilih firefox jelek, diikuti oleh kustom Anda tampak bagus. Tidak ideal

Sekarang untuk menjalankan firefox ini, tambahkan elemen span sekitar dengan kelas 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Kemudian perbaiki CSS untuk menyembunyikan panah kotor mozilla dengan -moz-appearance: window dan melempar panah kustom ke kelas span 'css-select-moz', tetapi hanya tampilkan di mozilla, seperti ini:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Cukup keren untuk hanya menemukan bug ini 3 jam yang lalu (saya baru mengenal desain web dan sepenuhnya otodidak). Namun, komunitas ini secara tidak langsung telah memberi saya banyak bantuan, saya pikir sudah saatnya saya memberikan sesuatu kembali.

Saya hanya mengujinya di firefox (mac) versi 18, dan kemudian 22 (setelah saya perbarui).

Semua umpan balik diterima.

Pembaruan: ini diperbaiki di Firefox v35. Lihat inti lengkap untuk detailnya.

Baru tahu cara menghapus panah pilihan dari Firefox . Caranya adalah dengan menggunakan campuran -prefix-appearance, text-indentdan text-overflow. Ini adalah CSS murni dan tidak memerlukan markup tambahan.

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

Diuji pada Windows 8, Ubuntu dan Mac, versi terbaru Firefox.

Contoh langsung: http://jsfiddle.net/joaocunha/RUEbp/1/

Lebih lanjut tentang subjek: https://gist.github.com/joaocunha/6273016

Trik yang bekerja untuk saya adalah membuat lebar pilih lebih dari 100% dan menerapkan overflow: disembunyikan

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

Ini adalah satu-satunya cara sekarang untuk menyembunyikan panah dropdown di FF.

BTW. jika Anda ingin dropdown yang indah gunakan http://harvesthq.github.com/chosen/

Pembaruan Penting:

Pada Firefox V35 properti penampilan sekarang berfungsi !!

Dari catatan rilis resmi firefox di V35 :

Menggunakan -moz-appearancedengan nonenilai pada kotak kombo sekarang menghapus tombol dropdown (bug 649849).

Jadi sekarang untuk menyembunyikan panah default - semudah menambahkan aturan berikut pada elemen pilih kami:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Kami telah menemukan cara sederhana dan layak untuk melakukan ini. Ini lintas-browser, dapat didegradasi, dan tidak memecah posting bentuk. Pertama, atur kotak pilih opacityke 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

ini agar Anda masih bisa mengkliknya

Kemudian buat div dengan dimensi yang sama dengan kotak pilih. Div harus diletakkan di bawah kotak pilih sebagai latar belakang. Gunakan { position: absolute }dan z-indexuntuk mencapai ini.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Perbarui innerHTML div dengan javascript. Mudah dengan jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Itu dia! Cukup gaya div Anda, bukan kotak pilih. Saya belum menguji kode di atas sehingga Anda mungkin perlu mengubahnya. Tapi semoga Anda mendapatkan intinya.

Saya pikir solusi ini berdetak {-webkit-appearance: none;}. Apa yang harus dilakukan browser paling banyak adalah menentukan interaksi dengan elemen formulir, tetapi jelas bukan bagaimana awalnya ditampilkan pada halaman saat itu merusak desain situs.

Coba dengan cara ini:

-webkit-appearance: button;
-moz-appearance: button;

Kemudian, Anda dapat menggunakan gambar yang berbeda sebagai latar belakang dan menempatkannya:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Ada cara lain untuk browser moz:

text-indent:10px;

Jika Anda memiliki lebar yang ditentukan untuk Anda pilih, properti ini akan menekan tombol dropbox default di bawah area yang dipilih.

Ini bekerja untuk saya! ;)

Meskipun bukan solusi lengkap saya telah menemukan bahwa ...

-moz-appearance: window;

... bekerja sampai batas tertentu. Anda tidak dapat mengubah latar belakang (-warna atau -gambar) tetapi elemen tersebut dapat ditampilkan dengan warna: transparan. Tidak sempurna tapi ini awal dan Anda tidak perlu mengganti elemen tingkat sistem dengan js satu.

Saya rasa saya menemukan solusi yang kompatibel dengan FF31 !!!
Berikut adalah dua opsi yang dijelaskan dengan baik di tautan ini:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Saya menggunakan opsi 1: Rodrigo-Ludgero memposting perbaikan ini di Github, termasuk online demo. Saya menguji demo ini di Firefox 31.0 dan tampaknya berfungsi dengan benar. Diuji pada Chrome dan IE juga. Berikut ini adalah kode html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

dan css:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

Ini bekerja sangat baik untuk saya!

Sayangnya untuk Anda ini adalah "sesuatu yang mewah". Biasanya ini bukan tempat penulis web untuk mendesain ulang elemen formulir. Banyak browser yang sengaja tidak membiarkan Anda menata mereka, agar pengguna dapat melihat kontrol OS yang biasa mereka gunakan.

Satu-satunya cara untuk melakukan ini secara konsisten melalui browser dan sistem operasi, adalah menggunakan JavaScript dan mengganti selectelemen dengan yang "DHTML".

Artikel berikut menunjukkan tiga plugin berbasis jQuery yang memungkinkan Anda melakukan itu (ini agak lama, tapi saya tidak dapat menemukan apa pun saat ini)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

Saya styling yang dipilih hanya suka ini

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

Ini berfungsi untuk saya di FF, Safari, dan Chrome di semua versi yang telah saya uji.

Dalam IE saya masukkan:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Anda juga dapat: .yourclass :: - ms-expand {display: none; } .Anda :: - ms-exapan {display: none; }

Saya tahu pertanyaan ini agak lama, tetapi karena muncul di google, dan ini adalah solusi "baru":

appearance: normalTampaknya berfungsi baik di Firefox untuk saya (versi 5 sekarang). tetapi tidak di Opera dan IE8 / 9

Sebagai solusi untuk Opera dan IE9, saya menggunakan :before pseudoselector untuk membuat kotak putih baru dan meletakkannya di atas panah.

Sayangnya, di IE8 ini tidak berhasil. Kotak ini diberikan dengan benar, tetapi panah tetap saja mencuat ...: - /

Menggunakan select:beforeberfungsi dengan baik di Opera, tetapi tidak di IE. Jika saya melihat alat pengembang, saya melihatnya membaca aturan dengan benar, dan kemudian mengabaikannya (mereka dicoret). Jadi saya menggunakan <span class="selectwrap">yang sebenarnya <select>.

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

Anda mungkin perlu mengubah ini sedikit, tetapi ini bekerja untuk saya!

Penafian: Saya menggunakan ini untuk mendapatkan salinan halaman web dengan bentuk yang bagus sehingga saya tidak perlu membuat halaman kedua. Saya bukan 1337 haxx0r yang menginginkan scrollbar merah, <marquee>tag, dan yang lainnya :-) Harap jangan menerapkan style berlebihan pada formulir kecuali Anda memiliki alasan yang sangat bagus.

Gunakan pointer-eventsproperti.

Idenya di sini adalah untuk overlay elemen di atas panah drop down asli (untuk membuat custom kami) dan kemudian melarang event pointer di atasnya. [lihat posting ini ]

Berikut ini adalah FIDDLE yang berfungsi menggunakan metode ini.

Juga, dalam jawaban SO ini saya membahas ini dan metode lain secara lebih rinci.

Ini berfungsi (diuji pada Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}

membangun jawaban oleh @ JoãoCunha, satu gaya css yang berguna untuk lebih dari satu browser

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

Lebih jauh ke jawaban Joao Cunha , masalah ini sekarang ada di Daftar ToDo Mozilla dan ditargetkan untuk ver 35.

Bagi yang menginginkan, berikut adalah solusi dari Todd Parker, dirujuk di blog Cunha, yang berfungsi hari ini:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

Sejak Firefox 35, " -moz-appearance:none" yang sudah Anda tulis dalam kode Anda, akhirnya hapus tombol panah yang diinginkan.

Itu adalah bug yang dipecahkan sejak versi itu.

Banyak Diskusi Terjadi di sana-sini tetapi saya tidak melihat beberapa solusi yang tepat untuk masalah ini. Akhirnya diakhiri dengan menulis kode Jquery + CSS kecil untuk melakukan HACK ini di IE & Firefox.

Hitung Lebar Elemen (Elemen PILIH) menggunakan Jquery. Tambahkan Wrapper Around Element Pilih dan Keep overflow disembunyikan untuk elemen ini. Pastikan Lebar bungkus ini tepat. 25px kurang dari Elemen SELECT. Ini bisa dengan mudah dilakukan dengan Jquery. Jadi Sekarang Ikon Kita Telah Hilang ..! dan sekarang saatnya untuk menambahkan ikon gambar kita pada elemen SELECT ... !!! Cukup tambahkan beberapa baris sederhana untuk menambahkan latar belakang dan Anda semua Selesai .. !! Pastikan untuk menggunakan overflow tersembunyi untuk pembungkus luar,

Berikut adalah Contoh Kode yang dilakukan untuk Drupal. Namun dapat digunakan untuk orang lain juga dengan menghapus beberapa baris kode yang spesifik Drupal.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

Solusi berfungsi di Semua Peramban IE, Chrome & Firefox Tidak perlu Menambah Hacks Fixed Widths Menggunakan CSS. Semuanya ditangani secara dinamis menggunakan JQuery.!

Lebih Dijelaskan di: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

coba css ini

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Bekerja

The appearanceproperti dari CSS3 tidak memungkinkan nonenilai. Lihatlah referensi W3C . Jadi, apa yang Anda coba lakukan tidak valid (memang Chrome seharusnya tidak menerima juga).

Maka sayangnya kami benar-benar tidak memiliki solusi lintas browser untuk menyembunyikan panah itu menggunakan CSS murni. Seperti yang ditunjukkan, Anda perlu JavaScript.

Saya sarankan Anda untuk mempertimbangkan menggunakan plugin selectBox jQuery . Ini sangat ringan dan dilakukan dengan baik.

Anda bisa menambah lebar kotak dan memindahkan panah lebih dekat ke kiri panah. ini kemudian memungkinkan Anda untuk menutupi panah dengan div putih kosong.

Lihat: http://jsbin.com/aniyu4/86/edit

Apakah Anda menerima perubahan kecil pada html?

Sesuatu seperti meletakkan tag div yang berisi tag pilih.

Lihatlah.

Atau, Anda dapat klip pilih. Sesuatu di sepanjang garis:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Ini harus klip 30px dari sisi kanan kotak pilih, menghilangkan panah. Sekarang menyediakan gambar latar belakang 170px dan voila, gaya pilih

Ini adalah retasan besar, tetapi -moz-appearance: menulist-textmungkin bisa melakukan trik.

Saya mengalami masalah yang sama. Sangat mudah untuk membuatnya bekerja pada FF dan Chrome, tetapi pada IE (8+ yang perlu kami dukung) semuanya menjadi rumit. Solusi termudah yang dapat saya temukan untuk elemen pilih khusus yang berfungsi "di mana pun saya mencoba", termasuk IE8, menggunakan .customSelect ()

Peretasan yang bermanfaat bagi saya adalah untuk mengatur tampilan (memilih) inline-flex. Memotong panah keluar dari tombol pilih saya. Tanpa semua kode yang ditambahkan.

• Hanya untuk Fx. -webkit appearancemasih dibutuhkan untuk Chrome, dll ...

Jawaban Jordan Young adalah yang terbaik. Tetapi jika Anda tidak dapat atau tidak ingin mengubah HTML Anda, Anda dapat mempertimbangkan untuk menghapus panah bawah kustom yang disajikan untuk Chrome, Safari, dll dan meninggalkan panah default firefox - tetapi tanpa menghasilkan panah ganda. Tidak ideal, tetapi perbaikan cepat yang baik yang tidak menambahkan HTML apa pun dan tidak mengganggu tampilan khusus Anda di peramban lain.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

hackity hack ... solusi yang berfungsi di setiap browser yang saya uji (Safari, Firefox, Chrome). Tidak memiliki IE yang ada, jadi alangkah baiknya jika Anda dapat menguji dan berkomentar:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, dengan gambar yang disandikan url:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

Saya menggunakan: after-element untuk menutupi panah jelek. Karena pilih tidak mendukung: setelah, saya perlu pembungkus untuk bekerja dengannya. Sekarang, jika Anda mengklik panah, dropdown tidak akan mendaftarkannya ... kecuali browser Anda mendukung pointer-events: none, yang semua orang kecuali IE10- tidak: http://caniuse.com/#feat=pointer-events

Jadi bagi saya itu sempurna - solusi yang bagus, bersih, tidak sakit kepala, setidaknya dibandingkan dengan semua opsi lain yang termasuk javascript.

tl; dr:

Jika IE10 (atau lebih rendah) Pengguna mengklik panah, itu tidak akan berfungsi. Bekerja cukup baik untukku ...

Jika Anda tidak keberatan mengutak-atik JS, saya menulis sebuah plugin jQuery kecil yang membantu Anda melakukannya. Dengan itu Anda tidak perlu khawatir tentang awalan vendor.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Fiddle di sini: JS Fiddle

Syaratnya adalah Anda harus mengatur pemilihan dari awal (ini berarti mengatur latar belakang dan batas), tetapi Anda mungkin tetap ingin melakukan ini.

Juga karena fungsi menggantikan pemilihan asli dengan div, Anda akan kehilangan gaya yang dilakukan secara langsung pada pemilih pilih di CSS Anda. Jadi berikan elemen pilih kelas dan gaya kelas.

Mendukung sebagian besar browser modern, jika Anda ingin menargetkan browser yang lebih lama, Anda dapat mencoba versi jQuery yang lebih lama, tetapi mungkin harus mengganti on () dengan bind () pada fungsi (tidak diuji)

Jawaban lain sepertinya tidak berhasil untuk saya, tetapi saya menemukan retasan ini. Ini bekerja untuk saya (Juli 2014)

select {
-moz-appearance: textfield !important;
    }

Dalam kasus saya, saya juga memiliki bidang input woocommerce jadi saya menggunakan ini

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

Diperbarui jawaban saya untuk menunjukkan pilih daripada input