it-swarm.com.de

So entfernen Sie den Pfeil aus einem Auswahlelement in Firefox

Ich versuche, ein select-Element mit CSS3 zu formatieren. Ich erhalte die gewünschten Ergebnisse in WebKit (Chrome/Safari), aber Firefox spielt nicht gut (ich störe nicht einmal mit IE). Ich verwende die CSS3-Eigenschaft appearance, aber aus irgendeinem Grund kann ich das Dropdown-Symbol nicht aus Firefox entfernen. 

Hier ist ein Beispiel für das, was ich mache: 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 der -moz-appearance: none das Dropdown-Element nicht los.

Irgendwelche Ideen? Nein, JavaScript ist keine Option

169
RussellUresti

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

Ich bin mit einer einfachen Problemumgehung gekommen. 

Dadurch werden im Wesentlichen alle Formatierungen des Auswahlfelds in Firefox entfernt und ein Bereichselement wird mit dem benutzerdefinierten Stil um das Auswahlfeld gelegt. Dies sollte jedoch nur für Firefox gelten. 

Sagen Sie, dies ist Ihr Auswahlmenü: 

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

Und 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 würde dies mit dem Select-Menü angezeigt werden, gefolgt vom hässlichen Firefox-Auswahlpfeil, gefolgt von Ihrem Nice-Benutzerbildschirm. Nicht ideal. 

Um dies in Firefox zu erreichen, 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>

Fixieren Sie dann das CSS, um den schmutzigen Pfeil von Mozilla mit -moz-aussehen: window auszublenden, und werfen Sie den benutzerdefinierten Pfeil in die Spans-Klasse 'css-select-moz'. 

.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 vor 3 Stunden nur über diesen Fehler gestolpert bin (ich bin neu im Webdesign und vollkommen autodidaktisch). Diese Community hat mir jedoch indirekt so viel geholfen, dass ich dachte, es sei an der Zeit, etwas zurückzugeben. 

Ich habe es nur in Firefox (Mac) Version 18 und dann 22 getestet (nachdem ich ein Update durchgeführt habe). 

Alle Rückmeldungen sind willkommen. 

77
Jordan Young

Update: Dies wurde in Firefox v35 behoben. Weitere Informationen finden Sie im Gesamtinhalt .


Ich habe gerade herausgefunden , wie der Auswahlpfeil aus Firefox entfernt wird . Der Trick besteht darin, eine Mischung aus -prefix-appearance, text-indent und text-overflow zu verwenden. 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, neueste Versionen von Firefox.

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

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

165
João Cunha

Der Trick, der für mich funktioniert, besteht darin, Die Breite um mehr als 100% zu bestimmen und den Überlauf anzuwenden: ausgeblendet

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

Dies ist der einzige Weg, den Dropdown-Pfeil in FF zu verbergen.

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

59
opengrid

Wichtiges Update:

Ab Firefox V35 funktioniert das Erscheinungsbild jetzt !!

Aus den offiziellen Release-Informationen von firefox zu V35 :

Wenn Sie -moz-appearance mit dem Wert none in einer Combobox verwenden, entfernen Sie jetzt. die Dropdown-Schaltfläche (Fehler 649849).

Um nun den Standardpfeil auszublenden, fügen Sie einfach die folgenden Regeln zu unserem select-Element hinzu:

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>

26
Danield

Wir haben dafür einen einfachen und anständigen Weg gefunden. Es ist Cross-Browser, abbaubar und unterbricht einen Formularposten nicht. Setzen Sie zunächst die opacity der Auswahlbox auf 0.

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

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

dies ist so, dass Sie immer noch darauf klicken können

Dann machen Sie div mit den gleichen Abmessungen wie das Auswahlfeld. Das div sollte als Hintergrund unter der Auswahlbox liegen. Verwenden Sie { position: absolute } und z-index, um 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 die innere HTML von div mit Javascript. Einfaches mit jQuery:

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

Das ist es! Stylen Sie einfach Ihr div anstelle des Auswahlfelds. Ich habe den obigen Code nicht getestet, daher werden Sie wahrscheinlich Tweak benötigen. Aber hoffentlich bekommst du den Gist. 

Ich denke, diese Lösung schlägt {-webkit-appearance: none;}. Was Browser am meisten tun sollten, ist die Interaktion mit Formularelementen, aber definitiv nicht, wie sie auf der Seite angezeigt werden, da das Website-Design dadurch beeinträchtigt wird. 

20
Shaun

Versuchen Sie es so:

-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 Sie ausgewählt haben, wird diese Eigenschaft die Standard-Dropbox-Schaltfläche unter dem Auswahlbereich drücken.

Für mich geht das! ;)

14
ninja_corp

Ich habe zwar keine vollständige Lösung gefunden, aber…

-moz-appearance: window;

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

6

Ich denke, ich habe die Lösung mit FF31 kompatibel gefunden !!!
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 dieses Update auf Github veröffentlicht, einschließlich einer Online-Demo. Ich habe diese Demo mit Firefox 31.0 getestet und scheint korrekt zu funktionieren. Getestet auch in Chrome und IE. 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 die 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!

4
ferocesalatino
/* 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; 
    }
}
2
Todd Bruss

Leider ist dieses ist "etwas Besonderes". Normalerweise ist es nicht die Aufgabe von Webautoren, Formularelemente neu zu gestalten. Viele Browser lassen Sie absichtlich nicht stilisieren, 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, ist JavaScript zu verwenden und die select-Elemente durch "DHTML" -Elemente zu ersetzen.

Der folgende Artikel zeigt drei auf jQuery basierende Plugins, mit denen Sie das tun können (es ist ein bisschen alt, aber ich konnte momentan nichts aktuelles finden)

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

2
RoToRa

Ich stelle die Auslese gerade so gefällt

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

Es funktioniert in allen Versionen, die ich getestet habe, in FF, Safari und Chrome.

In IE habe ich eingefügt:

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

Du kannst auch: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }

2
Alex Moleiro

@ JoãoCunha, ein CSS-Stil, der für mehrere 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;
}
1
Daniël Tulp

Dies funktioniert (getestet mit Firefox 23.0.1):

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

Hier und dort finden viele Diskussionen statt, aber ich sehe keine richtige Lösung für dieses Problem. Schließlich endete ich mit dem Schreiben eines kleinen Jquery + CSS-Codes, um diesen HACK auf IE & Firefox auszuführen.

Berechnen Sie die Elementbreite (SELECT-Element) mit Jquery . Fügen Sie einen Wrapper um Select-Element hinzu und lassen Sie den Überlauf für dieses Element ausgeblendet. Stellen Sie sicher, dass die Breite dieses Wrappers ungefähr ist. 25px weniger als bei SELECT Element. Dies könnte leicht mit Jquery erledigt werden ... Jetzt ist unser Symbol weg ...! und es ist Zeit für das Hinzufügen eines Bildsymbols auf dem SELECT-Element ... !!! Fügen Sie einfach ein paar einfache Zeilen hinzu, um Hintergrund hinzuzufügen. Dann sind Sie alle fertig .

Hier ist ein Codebeispiel, das für Drupal erstellt wurde. Es kann jedoch auch für andere verwendet werden, indem einige 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 Das Hinzufügen fester Widths-Hacks mithilfe von CSS ist nicht erforderlich. Alles wird dynamisch mit JQuery behandelt.!

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

1
user3058338

probieren Sie diese CSS aus

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

Es funktioniert

1
subindas pm

Weiter zu Joao Cunhas Antwort , dieses Problem ist jetzt auf Mozillas ToDo-Liste und wird für Version 35 anvisiert.

Für diejenigen, die es wünschen, hier ist ein Workaround von Todd Parker, auf den in Cunhas Blog verwiesen wird, der 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;
}
1
crashwap

Ab Firefox 35 "-moz-appearance:none", das Sie bereits in Ihren Code geschrieben haben, entfernen Sie die Pfeilschaltfläche wie gewünscht.

Es wurde ein bug seit dieser Version gelöst.

1
Luca Detomi

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

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

Als Workaround für Opera und IE9 habe ich den Pseudoselektor :before verwendet, um ein neues weißes Kästchen zu erstellen und dieses über den Pfeil zu setzen.

Leider funktioniert dies in IE8 nicht . Die Box wird korrekt gerendert, aber der Pfeil steht trotzdem hervor ...: - /

Die Verwendung von select:before funktioniert in Opera einwandfrei, jedoch nicht im IE. 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 einen <span class="selectwrap"> um den aktuellen <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 haben möchte :-) Bitte nicht wende exzessiven Stil auf Formulare an, es sei denn, du hast einen sehr guten Grund.

1
Martin Tournoij

Verwenden Sie die pointer-events-Eigenschaft. 

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

Hier ist eine funktionierende GEIGE, die diese Methode verwendet.

In this SO answer habe ich diese und eine andere Methode ausführlicher erörtert.

1
Danield

Oder Sie können die Auswahl ausschneiden. Etwas im Sinne von:

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

Dies sollte 30 Pixel der rechten Seite des Auswahlfelds abschneiden, wodurch der Pfeil entfernt wird. Geben Sie jetzt ein 170px-Hintergrundbild und einen Voila-Stil an

0
Dusan Smolnikar

Die appearance-Eigenschaft von CSS3 erlaubt keinen none-Wert. Werfen Sie einen Blick auf die W3C-Referenz . Daher ist das, was Sie versuchen, nicht gültig (Chrome sollte dies auch nicht akzeptieren).

Dann haben wir leider keine Cross-Browser-Lösung, um diesen Pfeil mit reinem CSS auszublenden. Wie bereits erwähnt, benötigen Sie JavaScript.

Ich empfehle Ihnen die Verwendung von selectBox jQuery plugin . Es ist sehr leicht und gut gemacht.

0

Wenn es Ihnen nichts ausmacht, mit JS zu spielen, habe ich ein kleines jQuery-Plugin geschrieben, das Ihnen dabei hilft. Damit brauchen Sie sich nicht um Herstellerpräfixe zu kümmern.

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

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

Da durch die Funktion die ursprüngliche Auswahl durch ein Div ersetzt wird, verlieren Sie jegliches Styling direkt in der Auswahlauswahl in Ihrem CSS. Geben Sie dem select-Element also eine Klasse und stylen Sie die Klasse.

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

0
Hydde87

Würden Sie geringfügige Änderungen an der HTML-Datei akzeptieren?

So etwas wie ein div-Tag, das das select-Tag enthält.

Schau mal.

0
Galled

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

  • Nur für Fx. -webkit appearance wird noch benötigt für Chrome usw.
0
Andrew Ice

Sie können die Breite der Box vergrößern und den Pfeil nach links vom Pfeil verschieben. dann können Sie den Pfeil mit einem leeren weißen div überdecken.

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

0
user909410

Die Antwort von Jordan Young ist die beste. Wenn Sie Ihren HTML-Code jedoch nicht ändern können oder wollen, können Sie den benutzerdefinierten Abwärtspfeil entfernen, der für Chrome, Safari usw. bereitgestellt wird, und den Standardpfeil von firefox belassen - jedoch ohne Doppelpfeile. Nicht ideal, aber eine gute schnelle Lösung, die keinen HTML-Code hinzufügt und Ihren benutzerdefinierten Look 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;
  }
}
0
squarecandy

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

0
rafaelbiten

Es ist ein großer Hack, aber -moz-appearance: menulist-text könnte den Trick tun.

0
Anon

hackity hack ... eine Lösung, die in jedem getesteten Browser funktioniert (Safari, Firefox, Chrome). Ich habe keine IEs herumliegen, also 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-kodiertem 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 verwende das: after-Element, um den hässlichen Pfeil zu verdecken. Select unterstützt nicht: after, ich brauche einen Wrapper, um mit .. zu arbeiten. Wenn Sie jetzt auf den Pfeil klicken, wird das Dropdown-Menü nicht registriert ... es sei denn, Ihr Browser unterstützt pointer-events: none, was jeder außer IE10- tut: http://caniuse.com/#feat=pointer-events

Für mich ist es also perfekt - eine schöne, saubere Lösung mit niedrigem Kopfschmerz, zumindest verglichen mit allen anderen Optionen, die Javascript enthalten.

tl; dr:

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

0