So entfernen Sie den Pfeil aus einem ausgewählten Element in Firefox

Ich versuche, ein selectElement mit CSS3 zu formatieren. Ich erhalte die gewünschten Ergebnisse in WebKit (Chrome / Safari), aber Firefox spielt nicht gut (ich kümmere mich nicht einmal um den Internet Explorer). Ich verwende die CSS3- appearanceEigenschaft, kann aber aus irgendeinem Grund das Dropdown-Symbol in Firefox nicht ausschütteln.

Hier ist ein Beispiel für meine Arbeit: 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;
}

Wie Sie sehen können, versuche ich nichts Besonderes. Ich möchte nur die Standardstile entfernen und meinen eigenen Dropdown-Pfeil hinzufügen. Wie gesagt, großartig in WebKit, nicht großartig in Firefox. Anscheinend wird das -moz-appearance: noneDropdown-Element nicht entfernt.

Irgendwelche Ideen? Nein, JavaScript ist keine Option

Okay, ich weiß, dass diese Frage alt ist, aber 2 Jahre später haben Mozilla nichts getan.

Ich habe mir eine einfache Problemumgehung ausgedacht.

Dadurch wird im Wesentlichen die gesamte Formatierung des Auswahlfelds in Firefox entfernt und ein Span-Element mit Ihrem benutzerdefinierten Stil um das Auswahlfeld gewickelt, sollte jedoch nur für Firefox gelten.

Angenommen, dies ist Ihr ausgewähltes Menü:

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

Nehmen wir an, die CSS-Klasse 'css-select' lautet:

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

In Firefox wird dies mit dem Auswahlmenü angezeigt, gefolgt vom hässlichen Firefox-Auswahlpfeil, gefolgt von Ihrem gut aussehenden. Nicht ideal.

Um dies in Firefox in Gang zu bringen, fügen Sie ein span-Element mit der Klasse 'css-select-moz' hinzu:

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

Korrigieren Sie dann das CSS, um den schmutzigen Pfeil von Mozilla mit dem Fenster -moz-Erscheinungsbild: auszublenden, und werfen Sie den benutzerdefinierten Pfeil in die Klasse 'css-select-moz' des Bereichs, aber lassen Sie ihn nur wie folgt auf Mozilla anzeigen:

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

Ziemlich cool, weil ich erst vor 3 Stunden über diesen Fehler gestolpert bin (ich bin neu im Webdesign und völlig Autodidakt). Diese Community hat mir jedoch indirekt so viel Hilfe geleistet, dass ich dachte, es wäre an der Zeit, etwas zurückzugeben.

Ich habe es nur in Firefox (Mac) Version 18 und dann 22 (nachdem ich aktualisiert habe) getestet.

Alle Rückmeldungen sind willkommen.

Update: Dies wurde in Firefox v35 behoben. Einzelheiten finden Sie im vollständigen Inhalt .

Ich habe gerade herausgefunden, wie ich den Auswahlpfeil aus Firefox entfernen kann . Der Trick ist , eine Mischung aus zu verwenden -prefix-appearance, text-indentund text-overflow. Es ist reines CSS und erfordert kein zusätzliches Markup.

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

Getestet unter Windows 8, Ubuntu und Mac, den neuesten Versionen von Firefox.

Live-Beispiel: http://jsfiddle.net/joaocunha/RUEbp/1/

Mehr zum Thema: https://gist.github.com/joaocunha/6273016

Der Trick, der für mich funktioniert, besteht darin, die Auswahlbreite auf mehr als 100% zu erhöhen und einen Überlauf anzuwenden: versteckt

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

Dies ist derzeit die einzige Möglichkeit, den Dropdown-Pfeil in FF auszublenden.

Übrigens. Wenn Sie schöne Dropdowns wünschen, verwenden Sie http://harvesthq.github.com/chosen/

Wichtiges Update:

Ab Firefox V35 funktioniert die Darstellungseigenschaft jetzt !!

Aus den offiziellen Versionshinweisen von Firefox zu V35 :

Wenn Sie -moz-appearanceden noneWert in einer Combobox verwenden, entfernen Sie jetzt die Dropdown-Schaltfläche (Fehler 649849).

Um den Standardpfeil auszublenden, müssen Sie nun einfach die folgenden Regeln für unser Auswahlelement hinzufügen:

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>

Wir haben einen einfachen und anständigen Weg gefunden, dies zu tun. Es ist browserübergreifend, abbaubar und beschädigt keinen Formularbeitrag. Stellen Sie zuerst die Auswahlfelder opacityauf ein 0.

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

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

Auf diese Weise können Sie immer noch darauf klicken

Machen Sie dann div mit den gleichen Abmessungen wie das Auswahlfeld. Das div sollte als Hintergrund unter dem Auswahlfeld liegen. Verwenden Sie { position: absolute }und z-indexum dies zu erreichen.

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

Aktualisieren Sie das innerHTML des Div mit Javascript. Einfach mit jQuery:

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

Das ist es! Gestalten Sie einfach Ihr div anstelle des Auswahlfelds. Ich habe den obigen Code nicht getestet, daher müssen Sie ihn wahrscheinlich anpassen. Aber hoffentlich verstehen Sie das Wesentliche.

Ich denke, diese Lösung schlägt {-webkit-appearance: none;}. Was Browser höchstens tun sollten, ist die Interaktion mit Formularelementen zu diktieren, aber definitiv nicht, wie sie ursprünglich auf der Seite angezeigt werden, da dies das Site-Design beeinträchtigt.

Versuchen Sie Folgendes:

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

Dann können Sie ein anderes Bild als Hintergrund verwenden und es platzieren:

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

Es gibt einen anderen Weg für Moz-Browser:

text-indent:10px;

Wenn Sie eine Breite für die Auswahl definiert haben, drückt diese Eigenschaft die Standard-Dropbox-Schaltfläche unter dem Auswahlbereich.

Für mich geht das! ;)

Obwohl es keine vollständige Lösung ist, habe ich festgestellt, dass…

-moz-appearance: window;

… Funktioniert bis zu einem gewissen Grad. Sie können den Hintergrund (-color oder -image) nicht ändern, aber das Element kann mit der Farbe unsichtbar gemacht werden: transparent. Nicht perfekt, aber es ist ein Anfang und Sie müssen das Element auf Systemebene nicht durch ein js-Element ersetzen.

Ich denke, ich fand die Lösung kompatibel mit FF31 !!!
Hier sind zwei Optionen, die unter diesem Link gut erklärt werden:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

Ich habe Option 1 verwendet: Rodrigo-Ludgero hat diesen Fix auf Github veröffentlicht, einschließlich eines Online-Updates Demo. Ich habe diese Demo unter Firefox 31.0 getestet und sie scheint korrekt zu funktionieren. Auch auf Chrome und IE getestet. Hier ist der HTML-Code:

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

und das 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

Es funktioniert sehr gut für mich!

Leider für Sie , dies ist „etwas Phantasie“. Normalerweise ist es nicht die Aufgabe der Webautoren, Formularelemente neu zu gestalten. In vielen Browsern können Sie sie absichtlich nicht formatieren, damit der Benutzer die Betriebssystemsteuerelemente sehen kann, an die er gewöhnt ist.

Die einzige Möglichkeit, dies konsistent über Browser und Betriebssysteme zu tun, besteht darin, JavaScript zu verwenden und das zu ersetzen select Elemente durch "DHTML" -Elemente zu .

Der folgende Artikel zeigt drei jQuery-basierte Plugins, mit denen Sie dies tun können (es ist ein bisschen alt, aber ich konnte momentan nichts Aktuelles finden).

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

Ich gestalte die Auswahl einfach so

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

Es funktioniert für mich in FF, Safari und Chrome in allen Versionen, die ich getestet habe.

Im IE habe ich gesetzt:

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

Sie können auch: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {Anzeige: keine; }}

Ich weiß, dass diese Frage etwas alt ist, aber da sie bei Google auftaucht, ist dies eine "neue" Lösung:

appearance: normalScheint in Firefox für mich gut zu funktionieren (Version 5 jetzt). aber nicht in Opera und IE8 / 9

Als Problemumgehung für Opera und IE9 habe ich den :beforePseudoselector verwendet, um ein neues weißes Feld zu erstellen und dieses über den Pfeil zu setzen.

In IE8 funktioniert dies leider nicht . Die Box wird korrekt gerendert, aber der Pfeil ragt trotzdem heraus ...: - /

Die Verwendung select:beforefunktioniert in Opera einwandfrei, jedoch nicht im Internet Explorer. Wenn ich mir die Entwicklertools ansehe, sehe ich, dass sie die Regeln korrekt lesen und sie dann einfach ignorieren (sie sind durchgestrichen). Also benutze ich eine <span class="selectwrap">um die tatsächliche <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;
}

Möglicherweise müssen Sie dies ein wenig optimieren, aber das funktioniert bei mir!

Haftungsausschluss: Ich verwende dies, um eine gut aussehende Hardcopy einer Webseite mit Formularen zu erhalten, sodass ich keine zweite Seite erstellen muss. Ich bin kein 1337 haxx0r, der rote Bildlaufleisten, <marquee>Tags und so weiter möchte :-) Bitte wenden Sie kein übermäßiges Styling auf Formulare an, es sei denn, Sie haben einen sehr guten Grund.

Verwenden Sie die pointer-eventsEigenschaft.

Die Idee hier ist, ein Element über den nativen Dropdown-Pfeil zu legen (um unser benutzerdefiniertes zu erstellen) und dann Zeigerereignisse darauf zu verbieten. [siehe diesen Beitrag ]

Hier ist eine funktionierende FIDDLE mit dieser Methode.

Außerdem habe ich in dieser SO-Antwort diese und eine andere Methode ausführlicher besprochen.

Dies funktioniert (getestet unter Firefox 23.0.1):

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

Aufbauend auf der Antwort von @ JoãoCunha, einem CSS-Stil, der für mehr als einen Browser nützlich ist

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

Weiter Joao Cunha Antwort ist dieses Problem jetzt auf Mozillas ToDo - Liste und ist für ver 35 ausgerichtet.

Für diejenigen, die es wünschen, gibt es hier eine Problemumgehung von Todd Parker, auf die in Cunhas Blog verwiesen wird und die heute funktioniert:

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

Seit Firefox 35 "-moz-appearance:noneEntfernen Sie " das Sie bereits in Ihren Code geschrieben haben, die Pfeiltaste wie gewünscht.

Es war ein Fehler, der seit dieser Version behoben wurde.

Hier und da passieren viele Diskussionen, aber ich sehe keine richtige Lösung für dieses Problem. Zum Schluss schrieb ich einen kleinen Jquery + CSS-Code für diesen HACK in IE & Firefox.

Berechnen Sie die Elementbreite (SELECT Element) mit Jquery. Fügen Sie einen Wrapper um das ausgewählte Element hinzu und halten Sie den Überlauf für dieses Element verborgen. Stellen Sie sicher, dass die Breite dieses Wrappers ungefähr ist. 25px weniger als das von SELECT Element. Dies könnte leicht mit Jquery gemacht werden. So, jetzt ist unsere Ikone weg ..! und es ist Zeit, unser Bildsymbol auf dem SELECT-Element hinzuzufügen ... !!! Fügen Sie einfach ein paar einfache Zeilen zum Hinzufügen des Hintergrunds hinzu und schon sind Sie fertig .. !! Stellen Sie sicher, dass Sie einen Überlauf verwenden, der für die äußere Hülle verborgen ist.

Hier ist ein Codebeispiel, das für Drupal erstellt wurde. Kann jedoch auch für andere verwendet werden, indem nur wenige Codezeilen entfernt werden, die Drupal-spezifisch sind.

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

Die Lösung funktioniert auf allen Browsern IE, Chrome und Firefox. Es ist nicht erforderlich, Hacks mit festen Breiten mithilfe von CSS hinzuzufügen. Alles wird dynamisch mit JQuery gehandhabt.!

Weitere Informationen finden Sie unter: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

versuchen Sie dieses CSS

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

Es funktioniert

Die appearanceEigenschaft von CSS3 lässt keinen noneWert zu. Schauen Sie sich die W3C-Referenz an . Was Sie also versuchen, ist nicht gültig (Chrome sollte dies auch nicht akzeptieren).

Dann haben wir leider wirklich keine browserübergreifende Lösung, um diesen Pfeil mit reinem CSS auszublenden. Wie bereits erwähnt, benötigen Sie JavaScript.

Ich empfehle Ihnen, das selectBox jQuery-Plugin zu verwenden . Es ist sehr leicht und schön gemacht.

Sie können die Breite des Felds erhöhen und den Pfeil näher an die linke Seite des Pfeils bewegen. Auf diese Weise können Sie den Pfeil mit einem leeren weißen Div abdecken.

Schauen Sie mal rein : http://jsbin.com/aniyu4/86/edit

Würden Sie geringfügige Änderungen am HTML akzeptieren?

So etwas wie das Einfügen eines div-Tags, das das select-Tag enthält.

Schau mal.

Oder Sie können die Auswahl ausschneiden. Etwas in der Art von:

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

Dies sollte 30px von der rechten Seite des Auswahlfelds abschneiden und den Pfeil entfernen. Geben Sie nun ein 170px-Hintergrundbild und eine voila-Auswahl an

Es ist ein riesiger Hack, -moz-appearance: menulist-textkönnte aber den Trick machen.

Ich hatte das gleiche Problem. Es ist einfach, es auf FF und Chrome zum Laufen zu bringen, aber auf IE (8+, die wir unterstützen müssen) werden die Dinge kompliziert. Die einfachste Lösung, die ich für benutzerdefinierte Auswahlelemente finden konnte, die "überall dort funktioniert, wo ich es versucht habe", einschließlich IE8, ist die Verwendung von .customSelect ()

Ein nützlicher Hack für mich ist es, die (Auswahl-) Anzeige auf einzustellen inline-flex. Schneidet den Pfeil direkt aus meiner Auswahlschaltfläche. Ohne den gesamten hinzugefügten Code.

• Nur für Fx. -webkit appearancewird noch für Chrome benötigt, etc ...

Jordan Youngs Antwort ist die beste. Wenn Sie Ihren HTML-Code jedoch nicht ändern können oder möchten, können Sie den benutzerdefinierten Abwärtspfeil entfernen, der für Chrome, Safari usw. bereitgestellt wird, und den Standardpfeil von Firefox belassen - ohne dass sich daraus doppelte Pfeile ergeben. Nicht ideal, aber eine gute schnelle Lösung, die kein HTML hinzufügt und Ihr benutzerdefiniertes Aussehen in anderen Browsern nicht beeinträchtigt.

<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 ... eine Lösung, die in jedem von mir getesteten Browser (Safari, Firefox, Chrome) funktioniert. Es liegen keine IEs herum, daher wäre es schön, wenn Sie testen und kommentieren könnten:

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

CSS mit URL-codiertem Bild:

.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

Ich benutze das: after-Element, um den hässlichen Pfeil abzudecken. Da select nicht unterstützt: nachher brauche ich einen Wrapper, mit dem ich arbeiten kann. Wenn Sie jetzt auf den Pfeil klicken, wird er in der Dropdown-Liste nicht registriert ... es sei denn, Ihr Browser unterstützt dies pointer-events: none, was alle außer IE10 tun: http://caniuse.com/#feat=pointer-events

Für mich ist es also perfekt - eine schöne, saubere Lösung mit wenig Kopfschmerzen, zumindest im Vergleich zu allen anderen Optionen, die Javascript enthalten.

tl; dr:

Wenn IE10-Benutzer (oder niedriger) auf den Pfeil klicken, funktioniert dies nicht. Funktioniert gut genug für mich ...

Wenn es Ihnen nichts ausmacht, mit JS herumzuspielen, habe ich ein kleines jQuery-Plugin geschrieben, das Ihnen dabei hilft. Damit müssen Sie sich keine Gedanken über Herstellerpräfixe machen.

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

Geige hier: JS Geige

Die Bedingung ist, dass Sie die Auswahl von Grund auf neu gestalten müssen (dies bedeutet, dass Hintergrund und Rahmen festgelegt werden), aber Sie möchten dies wahrscheinlich trotzdem tun.

Da die Funktion die ursprüngliche Auswahl durch ein div ersetzt, verlieren Sie jegliches Styling, das direkt auf der Auswahlauswahl in Ihrem CSS vorgenommen wurde. Geben Sie dem select-Element also eine Klasse und formatieren Sie die Klasse.

Unterstützt die meisten modernen Browser. Wenn Sie ältere Browser ansprechen möchten, können Sie eine ältere Version von jQuery ausprobieren, müssen jedoch möglicherweise on () durch bind () in der Funktion ersetzen (nicht getestet).

Die anderen Antworten schienen für mich nicht zu funktionieren, aber ich fand diesen Hack. Das hat bei mir funktioniert (Juli 2014)

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

In meinem Fall hatte ich auch ein Woocommerce-Eingabefeld, also habe ich dieses verwendet

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

Meine Antwort wurde aktualisiert, um Auswahl statt Eingabe anzuzeigen