Entfernen Sie den Auswahlpfeil im IE

Ich habe ein Auswahlelement, ich möchte den Pfeil entfernen, dann kann ich ein anderes Symbol hinzufügen. Ich kann das für Firefox Safari und Chrome tun, aber dies funktionierte nicht in IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

SIEHE Fiddle auf IE9 . Alles was ich brauche ist den Pfeil in ie9 zu entfernen. Bitte JSFIDDLE Antwort.

In IE9 ist dies mit einem reinen Hack möglich, wie von @Spudley empfohlen. Da Sie die Höhe und Breite des Div angepasst und ausgewählt haben, müssen Sie Änderungen vornehmendiv:before CSS so Ihrem entspricht.

Wenn es sich um IE10 handelt, ist die Verwendung von css3 möglich

select::-ms-expand {
    display: none;
}

Wenn Sie jedoch an einem jQuery-Plugin interessiert sind, versuchen Chosen.jsSie es oder erstellen Sie ein eigenes in js.

Ich würde meine Lösung vorschlagen, die Sie in diesem GitHub-Repo finden können . Dies funktioniert auch für IE8 und IE9 mit einem benutzerdefinierten Pfeil, der von einer Symbolschrift stammt.

Beispiele für ein benutzerdefiniertes Cross-Browser-Dropdown-Menü Aktionen: Überprüfen Sie diese mit allen Browsern, um die Cross-Browser-Funktion anzuzeigen.

Beginnen wir mit den modernen Browsern und sehen dann die Lösung für die älteren.

Dropdown-Pfeil für Chrome, Firefox, Opera, Internet Explorer 10+

Für diese Browser ist es einfach, dasselbe Hintergrundbild für das Dropdown-Menü festzulegen, um denselben Pfeil zu erhalten.

Dazu müssen Sie den Standardstil des Browsers für das selectTag zurücksetzen und neue Hintergrundregeln festlegen (wie zuvor vorgeschlagen).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

Die appearanceRegeln werden auf "Keine" gesetzt, um die Standardregeln des Browsers zurückzusetzen. Wenn Sie für jeden Pfeil den gleichen Aspekt haben möchten, sollten Sie sie beibehalten.

Die backgroundRegeln in den Beispielen werden mit SVG-Inline-Bildern festgelegt, die unterschiedliche Pfeile darstellen. Sie sind zu 98% von links positioniert, um einen gewissen Abstand zum rechten Rand zu erhalten (Sie können die Position ganz einfach nach Ihren Wünschen ändern).

Um das korrekte browserübergreifende Verhalten beizubehalten, muss nur die folgende Regel beibehalten werden outline . Diese Regel setzt den Standardrahmen zurück, der (in einigen Browsern) angezeigt wird, wenn auf das Element geklickt wird. Alle anderen Regeln können bei Bedarf einfach geändert werden.

Dropdown-Pfeil für Internet Explorer 8 (IE8) und Internet Explorer 9 (IE9) mit Symbolschriftart

Das ist der schwierigere Teil ... oder vielleicht auch nicht.

Es gibt keine Standardregel select::-ms-expandzum Ausblenden der Standardpfeile für diese Browser (wie für IE10 +). Die Lösung besteht darin , den Teil des zu verbergen Dropdown-Menüs den Standardpfeil enthält, und eine Pfeilsymbolschrift (oder eine SVG-Datei, falls Sie dies bevorzugen) einzufügen, die der in den anderen Browsern verwendeten SVG-Datei ähnelt (siehe dieselect CSS-Regel Details zum verwendeten Inline-SVG).

Der allererste Schritt besteht darin, eine Klasse festzulegen, die den Browser erkennen kann. Aus diesem Grund habe ich die bedingten IE-IFs am Anfang des Codes verwendet. Diese IFs werden verwendet, um bestimmte Klassen an die anzuhängenhtml Tag und den älteren IE-Browser zu erkennen.

Danach muss jeder selectim HTML-Code von einem div(oder einem beliebigen Tag, das ein Element umschließen kann) umbrochen werden . Fügen Sie in diesem Wrapper einfach die Klasse hinzu, die die Symbolschrift enthält.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

In einfachen Worten wird dieser Wrapper verwendet, um das zu simulieren select Tag .

Um sich wie ein Dropdown-Menü zu verhalten, muss der Wrapper einen Rand haben, da wir den Rand verbergen, der von der kommt select .

Beachten Sie, dass wir den Rahmen nicht verwenden können, selectda wir den Standardpfeil ausblenden müssen, der ihn um 25% länger als der Wrapper verlängert. Folglich sollte sein rechter Rand nicht sichtbar sein, da wir diese 25% mehr durch die versteckenoverflow: hidden Regel die auf die angewendet wirdselect selbst .

Die benutzerdefinierte Pfeilsymbolschrift wird in die Pseudoklasse eingefügt, :beforein der die Regel contentdie Referenz für den Pfeil enthält (in diesem Fall handelt es sich um eine rechte Klammer).

Wir platzieren diesen Pfeil auch an einer absoluten Position, um ihn so weit wie möglich zu zentrieren (wenn Sie verschiedene Symbolschriftarten verwenden, denken Sie daran, diese durch Ändern der oberen und linken Werte und der Schriftgröße entsprechend anzupassen).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Sie können den Hintergrundpfeil oder den Symbolschriftpfeil ganz einfach erstellen und ersetzen, wobei jeder Pfeil, den Sie möchten, einfach in der background-imageRegel geändert oder selbst eine neue Symbolschriftdatei erstellt wird.

Falls Sie die Klasse und die Pseudoklasse verwenden möchten:

.simple-control ist deine CSS-Klasse

:disabled ist eine Pseudoklasse

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}