Jak usunąć strzałkę z wybranego elementu w przeglądarce Firefox

Próbuję stylizować selectelement za pomocą CSS3. Otrzymuję pożądane wyniki w WebKit (Chrome / Safari), ale Firefox nie działa dobrze (nawet nie zawracam sobie głowy IE). Używam appearancewłaściwości CSS3 , ale z jakiegoś powodu nie mogę usunąć ikony rozwijanej z przeglądarki Firefox.

Oto przykład tego, co robię: 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;
}

Jak widać, nie staram się o nic wymyślnego. Chcę tylko usunąć domyślne style i dodać własną strzałkę w dół. Jak powiedziałem, świetnie w WebKit, nie świetny w Firefoksie. Najwyraźniej -moz-appearance: nonenie usuwa elementu rozwijanego.

Jakieś pomysły? Nie, JavaScript nie wchodzi w grę

Okej, wiem, że to pytanie jest stare, ale 2 lata później i mozilla nic nie zrobiła.

Wymyśliłem proste obejście.

To zasadniczo usuwa całe formatowanie pola wyboru w przeglądarce Firefox i zawija element span wokół pola wyboru za pomocą własnego stylu, ale powinno mieć zastosowanie tylko do przeglądarki Firefox.

Powiedz, że to jest Twoje menu wyboru:

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

Załóżmy, że klasa css „css-select” to:

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

W Firefoksie wyświetlałoby się to z menu wyboru, a następnie brzydką strzałką wyboru Firefoksa, a następnie ładnie wyglądającą, niestandardową strzałką. Nieidealny.

Teraz, aby to działało w przeglądarce Firefox, dodaj element span z klasą `` 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>

Następnie napraw CSS, aby ukryć brudną strzałkę Mozilli za pomocą -moz-look: window i wrzuć niestandardową strzałkę do klasy span 'css-select-moz', ale wyświetl ją tylko w Mozilli, na przykład:

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

Całkiem fajnie, że natknąłem się na ten błąd tylko 3 godziny temu (jestem nowy w projektowaniu stron internetowych i całkowicie samouk). Jednak ta społeczność pośrednio udzieliła mi tak dużej pomocy, że pomyślałem, że nadszedł czas, aby coś w zamian dać.

Testowałem go tylko w przeglądarce Firefox (Mac) w wersji 18, a następnie 22 (po aktualizacji).

Wszelkie opinie są mile widziane.

Aktualizacja: naprawiono to w przeglądarce Firefox v35. Zobacz pełną treść szczegółów.

Właśnie wymyśliłem, jak usunąć strzałkę wyboru z przeglądarki Firefox . Sztuką jest wykorzystanie mieszankę -prefix-appearance, text-indenti text-overflow. Jest to czysty CSS i nie wymaga dodatkowych znaczników.

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

Testowane na Windows 8, Ubuntu i Mac, najnowsze wersje przeglądarki Firefox.

Przykład na żywo: http://jsfiddle.net/joaocunha/RUEbp/1/

Więcej na ten temat: https://gist.github.com/joaocunha/6273016

Sztuczka, która działa w moim przypadku, polega na wybraniu szerokości większej niż 100% i zastosowaniu przepełnienia: ukryty

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

W tej chwili jest to jedyny sposób, aby ukryć strzałkę w dół w FF.

BTW. jeśli chcesz mieć piękne listy rozwijane, użyj http://harvesthq.github.com/chosen/

Ważna aktualizacja:

Od wersji Firefox V35 właściwość wyglądu działa teraz !!

Z oficjalnych informacji o wydaniu Firefoksa na V35 :

Użycie -moz-appearancez nonewartością w polu kombi powoduje teraz usunięcie przycisku rozwijania (błąd 649849).

Więc teraz, aby ukryć domyślną strzałkę - jest to tak proste, jak dodanie następujących reguł do naszego elementu select:

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

PRÓBNY

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>

Znaleźliśmy na to prosty i przyzwoity sposób. Jest cross-browser, degradowalny i nie psuje postu formularza. Najpierw ustaw pole wyboru opacityna 0.

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

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

dzięki temu nadal możesz go kliknąć

Następnie utwórz element div o takich samych wymiarach jak pole wyboru. Element div powinien znajdować się pod polem wyboru jako tło. Użyj { position: absolute }i, z-indexaby to osiągnąć.

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

Zaktualizuj innerHTML elementu div za pomocą javascript. Easypeasy z jQuery:

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

Otóż ​​to! Po prostu stylizuj swój element div zamiast pola wyboru. Nie testowałem powyższego kodu, więc prawdopodobnie będziesz potrzebować go ulepszyć. Ale miejmy nadzieję, że rozumiesz sedno.

Myślę, że to rozwiązanie bije {-webkit-appearance: none;}. Przeglądarki powinny co najwyżej dyktować interakcję z elementami formularza, ale na pewno nie sposób ich początkowego wyświetlania na stronie, ponieważ to psuje projekt witryny.

Spróbuj w ten sposób:

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

Następnie możesz użyć innego obrazu jako tła i umieścić go:

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

Jest inny sposób dla przeglądarek Moz:

text-indent:10px;

Jeśli masz zdefiniowaną szerokość do wybrania, ta właściwość spowoduje naciśnięcie przycisku domyślnej skrzynki rozwijanej pod obszarem wyboru.

Mi to pasuje! ;)

Chociaż nie jest to kompletne rozwiązanie, stwierdziłem, że…

-moz-appearance: window;

… Działa do pewnego stopnia. Nie możesz zmienić tła (-kolor lub -obraz), ale element może być niewidoczny za pomocą koloru: przezroczysty. Nie jest to idealne rozwiązanie, ale to początek i nie trzeba wymieniać elementu poziomu systemu na element js.

Myślę, że znalazłem rozwiązanie zgodne z FF31 !!!
Oto dwie opcje, które są dobrze wyjaśnione pod tym linkiem:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Użyłem opcji 1: Rodrigo-Ludgero opublikował tę poprawkę na Github, w tym online próbny. Testowałem to demo w przeglądarce Firefox 31.0 i wygląda na to, że działa poprawnie. Przetestowano również w Chrome i IE. Oto kod 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>

i 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

To działa bardzo dobrze dla mnie!

Niestety dla ciebie to jest „coś nadzwyczajnego”. Zwykle nie jest to miejsce dla autorów stron internetowych, aby przeprojektowywać elementy formularzy. Wiele przeglądarek celowo nie pozwala na ich stylizację, aby użytkownik mógł zobaczyć kontrolki systemu operacyjnego, do których jest przyzwyczajony.

Jedynym sposobem, aby to zrobić konsekwentnie w przeglądarkach i systemach operacyjnych, jest użycie JavaScript i zastąpienie select elementów elementami „DHTML”.

Poniższy artykuł pokazuje trzy wtyczki oparte na jQuery, które pozwalają ci to zrobić (jest trochę stary, ale nie mogłem znaleźć nic aktualnego)

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

Stylizuję wybrany po prostu to lubi

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

Działa u mnie w FF, Safari i Chrome we wszystkich testowanych wersjach.

W IE umieściłem:

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

Możesz także: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

Wiem, że to pytanie jest trochę stare, ale ponieważ pojawia się w Google, a to jest „nowe” rozwiązanie:

appearance: normalWydaje się, że działa dobrze w Firefoksie dla mnie (teraz wersja 5). ale nie w Operze i IE8 / 9

Jako obejście dla Opery i IE9 użyłem :before problem w pseudoselektora, aby utworzyć nowe białe pole i umieścić je na górze strzałki.

Niestety w IE8 tak nie jest działa. Pudełko jest renderowane poprawnie, ale strzałka i tak odstaje ...: - /

Używanie select:beforedziała dobrze w Operze, ale nie w IE. Jeśli spojrzę na narzędzia programistyczne, widzę, że czyta poprawnie zasady, a następnie je po prostu ignoruje (są przekreślone). Więc używam <span class="selectwrap">około rzeczywistego <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;
}

Być może będziesz musiał to trochę poprawić, ale to działa dla mnie!

Zastrzeżenie: Używam tego, aby uzyskać ładnie wyglądającą drukowaną stronę internetową z formularzami, więc nie muszę tworzyć drugiej strony. Nie jestem 1337 haxx0r, który chce czerwonych pasków przewijania, <marquee>tagów i tak dalej :-) Proszę nie stosować nadmiernego stylu do formularzy, chyba że masz bardzo dobry powód.

Skorzystaj z pointer-eventsnieruchomości.

Pomysł polega na tym, aby nałożyć element na natywną strzałkę rozwijaną w dół (aby utworzyć naszą niestandardową), a następnie zablokować zdarzenia wskaźnika. [zobacz ten post ]

Oto działające FIDDLE używające tej metody.

Również w tej odpowiedzi SO omówiłem bardziej szczegółowo tę i inną metodę.

To działa (testowane w przeglądarce Firefox 23.0.1):

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

opierając się na odpowiedzi @ JoãoCunha, jednym stylu CSS, który jest przydatny dla więcej niż jednej przeglądarki

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

W nawiązaniu do odpowiedzi Joao Cunhy , ten problem znajduje się teraz na liście zadań do wykonania Mozilli i jest przeznaczony dla wersji 35.

Dla tych, którzy chcą, oto obejście Todda Parkera, do którego odwołuje się blog Cunha, które działa dzisiaj:

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

Od Firefoksa 35, " -moz-appearance:none" który już zapisałeś w swoim kodzie, ostatecznie usuń przycisk strzałki zgodnie z potrzebami.

To był błąd rozwiązany od tej wersji.

Wiele dyskusji dzieje się tu i tam, ale nie widzę odpowiedniego rozwiązania tego problemu. Ostatecznie skończyło się na napisaniu małego kodu Jquery + CSS do zrobienia tego hacka na IE i Firefox.

Oblicz szerokość elementu (wybierz element) za pomocą Jquery. Dodaj opakowanie wokół zaznaczonego elementu i ukryj przepełnienie dla tego elementu. Upewnij się, że szerokość tego opakowania wynosi ok. 25 pikseli mniej niż w przypadku elementu SELECT. Można to łatwo zrobić za pomocą Jquery. Więc teraz nasza ikona zniknęła ...! i pora na dodanie naszej ikony obrazka do elementu SELECT ... !!! Wystarczy dodać kilka prostych wierszy, aby dodać tło i gotowe .. !! Upewnij się, że używasz przelewu ukrytego dla zewnętrznego opakowania,

Oto przykład kodu, który został wykonany dla Drupala. Jednak może być użyty dla innych również poprzez usunięcie kilku linii kodu, który jest specyficzny dla Drupala.

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

Rozwiązanie działa na wszystkich przeglądarkach IE, Chrome i Firefox Nie ma potrzeby dodawania hacków o stałej szerokości za pomocą CSS. To wszystko jest obsługiwane dynamicznie za pomocą JQuery.!

Więcej opisane na: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

spróbuj tego css

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

To działa

appearanceNieruchomość z CSS3 nie zezwala na nonewartości. Spójrz na referencje W3C . Więc to, co próbujesz zrobić, nie jest prawidłowe (w rzeczywistości Chrome też nie powinien akceptować).

Niestety, tak naprawdę nie mamy żadnego rozwiązania dla różnych przeglądarek, aby ukryć tę strzałkę za pomocą czystego CSS. Jak wskazano, będziesz potrzebować JavaScript.

Proponuję rozważyć użycie wtyczki selectBox jQuery . Jest bardzo lekki i ładnie wykonany.

Możesz zwiększyć szerokość pola i przesunąć strzałkę bliżej lewej strzałki. pozwala to następnie zakryć strzałkę pustym białym elementem div.

Spójrz: http://jsbin.com/aniyu4/86/edit

Czy zaakceptowałbyś drobne zmiany w HTML?

Coś jak umieszczenie znacznika DIV zawierającego znacznik wyboru.

Spójrz.

Lub możesz przyciąć zaznaczenie. Coś w rodzaju:

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

Powinno to przyciąć 30px prawej strony pola wyboru, usuwając strzałkę. Teraz dostarcz obraz tła 170px i voila, stylizowany wybór

To ogromny hack, ale -moz-appearance: menulist-textmoże załatwić sprawę.

Miałem ten sam problem. Łatwo jest sprawić, by działał na FF i Chrome, ale w IE (8+, który musimy obsługiwać) sprawy się komplikują. Najłatwiejszym rozwiązaniem, jakie udało mi się znaleźć dla niestandardowych wybranych elementów, które działają „wszędzie, gdzie próbowałem”, w tym IE8, jest użycie .customSelect ()

Przydatnym dla mnie hackem jest ustawienie (wybiera) wyświetlania na inline-flex. Wycina strzałkę bezpośrednio z mojego przycisku wyboru. Bez całego dodanego kodu.

• Tylko dla Fx. -webkit appearancenadal potrzebne w przeglądarce Chrome itp ...

Odpowiedź Jordana Younga jest najlepsza. Ale jeśli nie możesz lub nie chcesz zmienić kodu HTML, możesz rozważyć po prostu usunięcie niestandardowej strzałki w dół wyświetlanej w Chrome, Safari itp. I pozostawienie domyślnej strzałki Firefoksa - ale bez podwójnych strzałek. Nie jest to idealne rozwiązanie, ale dobra szybka poprawka, która nie dodaje żadnego kodu HTML i nie wpływa na Twój niestandardowy wygląd w innych przeglądarkach.

<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 ... rozwiązanie, które działa w każdej testowanej przeze mnie przeglądarce (Safari, Firefox, Chrome). Nie masz żadnych IE, więc byłoby miło, gdybyś mógł przetestować i skomentować:

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

CSS, z obrazem zakodowanym w adresie 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

Używam elementu: after, aby zakryć brzydką strzałę. Ponieważ funkcja Select nie obsługuje: po tym potrzebuję opakowania do pracy. Teraz, jeśli klikniesz strzałkę, pointer-events: nonelista rozwijana nie zarejestruje jej ... chyba że Twoja przeglądarka obsługuje , co robi każdy oprócz IE10: http://caniuse.com/#feat=pointer-events

Więc dla mnie jest to idealne - ładne, czyste rozwiązanie, które nie powoduje bólu głowy, przynajmniej w porównaniu ze wszystkimi innymi opcjami, które zawierają javascript.

tl; dr:

Jeśli użytkownicy IE10 (lub starsze) klikną strzałkę, to nie zadziała. Działa wystarczająco dobrze dla mnie ...

Jeśli nie masz nic przeciwko majstrowaniu przy JS, napisałem małą wtyczkę jQuery, która pomoże ci to zrobić. Dzięki niemu nie musisz martwić się o prefiksy dostawców.

 $.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 tutaj: JS Fiddle

Warunkiem jest to, że musisz stylizować zaznaczenie od zera (oznacza to ustawienie tła i obramowania), ale prawdopodobnie i tak chcesz to zrobić.

Ponieważ funkcja zastępuje oryginalne zaznaczenie elementem div, utracisz wszelkie style wykonane bezpośrednio na selektorze wyboru w CSS. Więc nadaj elementowi select klasę i nadaj jej styl.

Obsługuje większość nowoczesnych przeglądarek, jeśli chcesz kierować reklamy na starsze przeglądarki, możesz wypróbować starszą wersję jQuery, ale być może trzeba będzie zastąpić on () bind () w funkcji (nie testowane)

Inne odpowiedzi wydawały się nie działać dla mnie, ale znalazłem ten hack. To zadziałało dla mnie (lipiec 2014)

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

W moim przypadku miałem również pole wejściowe woocommerce, więc użyłem tego

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

Zaktualizowałem moją odpowiedź, aby pokazać raczej wybór niż dane wejściowe