Firefox'taki seçili bir öğeden oku kaldırma

Bir stil yapmaya çalışıyorum selectCSS3 kullanarak öğe . WebKit'te (Chrome / Safari) arzu ettiğim sonuçları alıyorum, ancak Firefox güzel oynamıyor (IE ile bile rahatsız etmiyorum). CSS3 appearanceözelliğini kullanıyorum , ancak nedense Firefox'un açılır simgesini sallayamıyorum.

İşte ne yaptığımın bir örneği: 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;
}

Gördüğünüz gibi ben fantezi bir şey denemiyorum. Sadece varsayılan stilleri kaldırmak ve kendi açılır okumu eklemek istiyorum. Dediğim gibi, WebKit'te harika, Firefox'ta harika değil. Görünüşe göre, -moz-appearance: noneaçılır menüden kurtulmuyor.

Herhangi bir fikir? Hayır, JavaScript bir seçenek değil

Tamam, bu sorunun eski olduğunu biliyorum, ama pist ve mozilla'nın 2 yıl boyunca hiçbir şey yapmadı.

Basit bir çözüm buldum.

Bu aslında seçim kutusunun tüm biçimlendirmesini firefox'ta sıyırır ve seçim kutusunun etrafına bir yayılma öğesini özel stilinizle sarar, ancak yalnızca firefox için geçerli olmalıdır.

Bunun seçim menünüz olduğunu varsayalım:

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

Ve diyelim ki 'css-select' css sınıfı:

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

Firefox'ta, bu, seçim menüsü ve ardından çirkin firefox seçim oku ve ardından hoş görünümlü özel görünümünüzle görüntülenir. Uygun değil.

Şimdi bunu firefox'ta yapmak için 'css-select-moz' sınıfıyla bir span öğesi ekleyin:

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

Ardından, mozilla'nın kirli okunu -moz görünümü: penceresiyle gizlemek için CSS'yi düzeltin ve özel oku, 'css-select-moz' sınıfına atın, ancak sadece bu şekilde mozillada görüntülenmesini sağlayın:

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

Sadece 3 saat önce bu hata karşısında tökezlemek için serin (ben webdesign yeni ve tamamen kendi kendine öğretilen). Ancak, bu topluluk dolaylı olarak bana çok fazla yardım sağladı, bir şeyleri geri vermenin zamanı geldiğini düşündüm.

Sadece firefox (mac) sürüm 18 ve sonra 22'de (güncelledikten sonra) test ettim.

Tüm geri bildirimler açıktır.

Güncelleme: Bu Firefox v35'te düzeltildi. Ayrıntılar için tüm özete bakın.

Firefox'tan seçme okunun nasıl kaldırılacağını öğrendim . Hile bir karışımını kullanmaktır -prefix-appearance, text-indentve text-overflow. Saf CSS'dir ve fazladan işaretleme gerektirmez.

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

Firefox'un son sürümleri olan Windows 8, Ubuntu ve Mac'te test edildi.

Canlı örnek: http://jsfiddle.net/joaocunha/RUEbp/1/

Konuyla ilgili daha fazla bilgi: https://gist.github.com/joaocunha/6273016

Benim için çalışan hile, seçim genişliğini% 100'den fazla yapmak ve taşma uygulamaktır: gizli

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

Şu anda FF'deki açılır oku gizlemenin tek yolu bu.

BTW. güzel açılır listeler istiyorsanız http://harvesthq.github.com/chosen/

Önemli Güncelleme:

Firefox V35 itibariyle görünüm özelliği şimdi çalışıyor !!

Gönderen V35 üzerinde firefox resmi sürüm notları :

Kullanılması -moz-appearanceile nonebir combobox değer şimdi açılır düğmesini (böcek 649849) kaldırın.

Şimdi varsayılan oku gizlemek için - seçim öğemize aşağıdaki kuralları eklemek kadar kolay:

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>

Bunu yapmanın basit ve iyi bir yolunu bulduk. Çapraz tarayıcı, parçalanabilir ve form gönderisini bozmaz. Önce seçim kutusunu ' opacitya ayarlayın 0.

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

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

bu hala üzerine tıklayabilirsiniz

Ardından seçim kutusuyla aynı boyutlara sahip div yapın. Div, arka plan olarak seçim kutusunun altına yerleştirilmelidir. Bunu başarmak için { position: absolute }ve tuşlarını kullanın z-index.

.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>

Div'ın innerHTML'sini javascript ile güncelleyin. JQuery ile kolay kullanım:

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

Bu kadar! Seçim kutusu yerine div stilinizi oluşturun. Yukarıdaki kodu test etmedim, bu yüzden muhtemelen ayarlamanız gerekiyor. Ama umarım özü alırsın.

Bence bu çözüm yeniliyor {-webkit-appearance: none;}. Tarayıcıların en çok yapması gereken, form öğeleriyle etkileşime girmektir, ancak kesinlikle site tasarımını bozduğu için sayfalarda nasıl göründüklerini değil.

Bu şekilde deneyin:

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

Ardından, farklı bir resmi arka plan olarak kullanabilir ve yerleştirebilirsiniz:

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

Moz tarayıcıları için başka bir yol var:

text-indent:10px;

Seçtiğiniz bir genişlik tanımladıysanız, bu özellik, seçim alanının altındaki varsayılan dropbox düğmesine basacaktır.

Benim için çalışıyor! ;)

Tam bir çözüm olmasa da şunu buldum…

-moz-appearance: window;

… Bir dereceye kadar çalışıyor. Arka planı değiştiremezsiniz (-color veya -image), ancak öğe renkle görünmez hale getirilebilir: şeffaf. Mükemmel değil, ancak bir başlangıç ​​ve sistem seviyesi öğesini bir js ile değiştirmeniz gerekmez.

Bence çözümü FF31 ile uyumlu buldum !!!
İşte bu bağlantıda iyi açıklanmış iki seçenek:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Seçenek 1'i kullandım: Rodrigo-Ludgero bu düzeltmeyi Github'da çevrimiçi olarak da yayınladı demo. Bu demoyu Firefox 31.0'da test ettim ve düzgün çalışıyor gibi görünüyor. Chrome ve IE'de de test edildi. İşte html kodu:

<!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>

ve 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

Benim için çok iyi çalışıyor!

Ne yazık ki bu sizin için "süslü bir şey". Normalde form yazarlarını yeniden tasarlamak web yazarlarının yeri değildir. Birçok tarayıcı, kullanıcının alıştığı işletim sistemi denetimlerini görmesi için onları şekillendirmenize izin vermez.

Bunu tarayıcılar ve işletim sistemleri üzerinde tutarlı bir şekilde yapmanın tek yolu JavaScript kullanmak ve selectöğeleri "DHTML" olanlarla değiştirmek.

Aşağıdaki makale, bunu yapmanıza izin veren üç jQuery tabanlı eklentiyi gösteriyor (biraz eski, ancak şu anda geçerli bir şey bulamadım)

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

Seçimi şekillendiriyorum sadece bunu beğendim

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

Test ettiğim tüm sürümlerde FF, Safari ve Chrome'da benim için çalışıyor.

IE'de ben koydum:

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

Ayrıca şunları da yapabilirsiniz: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

Bu sorunun biraz eski olduğunu biliyorum, ancak Google'da ortaya çıktığı için ve bu "yeni" bir çözüm:

appearance: normalFirefox'ta benim için iyi çalışıyor gibi görünüyor (sürüm 5 şimdi). Opera ve IE8 / 9'da değil

Opera ve IE9 için bir geçici çözüm olarak, :beforeyeni bir beyaz kutu oluşturmak için pseudoselector'ı kullandım ve bunu okun üstüne koydum.

Ne yazık ki, IE8'de bu çalışmıyor . Kutu doğru bir şekilde oluşturuldu, ancak ok yine de çıkıyor ...: - /

Kullanımı select:beforeOpera cezası çalışır, ancak IE içinde. Geliştirici araçlarına bakarsam, kuralları doğru okuduğunu görüyorum ve sonra onları görmezden geliyorlar (çarpı geçiyorlar). Bu yüzden <span class="selectwrap">gerçek etrafında bir kullanın <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;
}

Bunu biraz düzeltmeniz gerekebilir, ama bu benim için çalışıyor!

Yasal Uyarı: Ben ikinci bir sayfa oluşturmak gerekmez bu yüzden formları ile bir web sayfasının iyi görünümlü bir basılı kopya almak için kullanıyorum. Ben kırmızı kaydırma çubukları, istediği bir 1337 haxx0r değilim <marquee>Lütfen etajer :-) etiketleri ve yok sen çok iyi bir nedeniniz olmadıkça formlarına aşırı tasarım geçerlidir.

pointer-eventsÖzelliği kullanın .

Buradaki fikir, bir öğeyi yerel açılır ok üzerine yerleştirmek (özel olanı oluşturmak için) ve ardından işaretçi olaylarına izin vermemektir. [ bu gönderiye bakın ]

İşte bu yöntemi kullanarak çalışan bir FIDDLE .

Ayrıca, bu SO cevabında bunu ve başka bir yöntemi daha ayrıntılı olarak tartıştım.

Bu çalışır (Firefox 23.0.1'de test edilmiştir):

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

birden fazla tarayıcı için yararlı bir css tarzı @ JoãoCunha tarafından cevap üzerinde bina

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

İçin Ek Joao Cunha cevap , bu sorunun artık Mozilla'nın Yapılacaklar Listesinde ve ver 35 hedeflenmiştir.

Arzu edenler için, şu anda Cunha'nın blogunda atıfta bulunan Todd Parker'ın bugün çalışan bir çözümü var:

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

Firefox 35'ten beri, "-moz-appearance:none zaten yazdığınız " den , sonunda ok düğmesini istediğiniz gibi kaldırın.

Bu versiyondan bu yana çözülen bir hataydı .

Burada ve orada bir sürü tartışma oluyor ama bu sorun için uygun bir çözüm görmüyorum. Sonunda IE ve Firefox'ta bu HACK yapmak için küçük bir Jquery + CSS kodu yazarak sona erdi.

Jquery kullanarak Öğe Genişliğini (SELECT Öğe) hesaplayın. Öğe Seç Et ve Bu öğe için taşmayı gizli tut çevresine bir Sarıcı ekleyin. Bu paketleyicinin Genişliğinin yaklaşık olduğundan emin olun. SELECT Öğesininkinden 25 piksel daha az. Bu Jquery ile kolayca yapılabilir. Şimdi Simgemiz Gitti ..! ve SELECT elementine görüntü ikonumuzu eklemenin zamanı geldi !!! Sadece arka plan eklemek için birkaç basit satır ekleyin ve hepiniz bitti .. !! Dış ambalaj için gizli taşma kullandığınızdan emin olun,

İşte Drupal için yapılan bir Kod Örneği. Ancak, Drupal'a Özgü olan birkaç kod satırını kaldırarak başkaları için de kullanılabilir.

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

Çözüm Tüm Tarayıcılarda çalışır IE, Chrome ve Firefox CSS Kullanarak Sabit Genişlikli Hackler Eklemeye gerek yoktur. Her şey dinamik olarak JQuery kullanılarak işleniyor.!

Daha fazla bilgi için: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

bu css'i dene

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

İşe yarıyor

appearanceCSS3 mülkiyet izin vermez nonedeğeri. W3C referansına bir göz atın . Yani, yapmaya çalıştığınız şey geçerli değil (aslında Chrome da kabul etmemelidir).

Ne yazık ki, o oku saf CSS kullanarak gizlemek için herhangi bir çapraz tarayıcı çözümümüz yok. Belirtildiği gibi, JavaScript'e ihtiyacınız olacak.

SelectBox jQuery eklentisini kullanmayı düşünmenizi öneririm . Çok hafif ve iyi yapılmış.

Kutunun genişliğini artırabilir ve oku okun soluna yaklaştırabilirsiniz. bu, oku boş bir beyaz div ile örtmenizi sağlar.

Bir göz atın: http://jsbin.com/aniyu4/86/edit

Html üzerinde küçük değişiklikler kabul eder misiniz?

Select etiketini içeren bir div etiketi koymak gibi bir şey.

Bir göz at.

Veya seçimi kırpabilirsiniz. Çizgileri boyunca bir şey:

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

Bu, seçim kutusunun sağ tarafının 30px'ini kırpmalı ve oku çıkarmalıdır. Şimdi 170 piksel arka plan resmi ve voila, stil seçimi seçin

Bu büyük bir hack, ama -moz-appearance: menulist-texthile yapabilir.

Aynı sorunu yaşıyordum. FF ve Chrome'da çalışmasını sağlamak kolaydır, ancak IE'de (desteklememiz gereken 8+) işler karmaşıklaşır. IE8 dahil "denediğim her yerde" çalışan özel seçme öğeleri için bulabildiğim en kolay çözüm .customSelect () kullanmaktır

Benim için kullanışlı bir hack, ekranı seçer (seçer) inline-flex. Oku seçim düğmemden çıkarır. Tüm eklenen kod olmadan.

• Sadece Fx için. -webkit appearanceChrome vb. için hala gerekli ...

Jordan Young'ın cevabı en iyisidir. Ancak HTML'nizi değiştirmek istemiyorsanız veya istemiyorsanız, yalnızca Chrome, Safari vb. İçin sunulan özel aşağı oku kaldırmayı ve firefox'un varsayılan oku bırakmayı (ancak çift ok ortaya çıkmadan) düşünebilirsiniz. İdeal değil, ancak HTML eklemeyen ve diğer tarayıcılardaki özel görünümünüzden ödün vermeyen iyi bir hızlı düzeltme.

<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 ... test ettiğim her tarayıcıda (Safari, Firefox, Chrome) çalışan bir çözüm. Etrafta yatan IE'ler yok, bu yüzden test edip yorum yapabilmeniz güzel olurdu:

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

Url kodlamalı resme sahip CSS:

.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

Çirkin oku kapsayacak şekilde: after-element kullanıyorum. Select desteklemediğinden: sonra, çalışmak için bir sarıcıya ihtiyacım var. Şimdi, oku tıklarsanız, açılır pointer-events: nonemenü kaydedilmez ... tarayıcınız desteklemediği sürece, IE10- dışındaki herkesin yaptığı: http://caniuse.com/#feat=pointer-events

Bu yüzden benim için mükemmel - en azından javascript içeren diğer tüm seçeneklerle karşılaştırıldığında güzel, temiz, düşük baş ağrısı bir çözüm.

tl; dr:

IE10 (veya daha düşük) Kullanıcılar oku tıklarsa çalışmaz. Benim için yeterince iyi çalışıyor ...

JS ile uğraşmak sakıncası yoksa, bunu yapmanıza yardımcı olan küçük bir jQuery eklentisi yazdım. Bununla birlikte satıcı önekleri hakkında endişelenmenize gerek yok.

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

Burada keman: JS Fiddle

Koşul, seçimi sıfırdan stilize etmeniz gerektiğidir (bu, arka planı ve kenarlığı ayarlamak anlamına gelir), ancak muhtemelen bunu yine de yapmak istersiniz.

Ayrıca işlev orijinal seçimi bir div ile değiştirdiğinden, doğrudan CSS'nizdeki seçim seçicide yapılan stilleri kaybedersiniz. Bu nedenle select öğesine bir sınıf verin ve sınıfı biçimlendirin.

Çoğu modern tarayıcıyı destekler, eski tarayıcıları hedeflemek istiyorsanız, jQuery'nin daha eski bir sürümünü deneyebilirsiniz, ancak belki de () işlevinde bind () ile (test edilmemiştir)

Diğer cevaplar benim için işe yaramadı, ama bu hack buldum. Bu benim için çalıştı (Temmuz 2014)

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

Benim durumumda da bir woocommerce giriş alanı vardı, bu yüzden bunu kullandım

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

Cevabım girdi yerine seçim göstermek için güncellendi