Hier sind drei Lösungen:
Lösung Nr. 1 - Erscheinungsbild: Keine - mit Internet Explorer 10 - 11-Problemumgehung ( Demo )
- -
Um den Standardpfeil appearance: nonefür das Auswahlelement auszublenden , fügen Sie Ihren eigenen benutzerdefinierten Pfeil mit hinzubackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browser-Unterstützung:
appearance: nonehat eine sehr gute Browser-Unterstützung ( caniuse ) - mit Ausnahme von Internet Explorer 11 (und höher) und Firefox 34 (und höher).
Wir können diese Technik verbessern und durch Hinzufügen Unterstützung für Internet Explorer 10 und Internet Explorer 11 hinzufügen
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Wenn Internet Explorer 9 ein Problem darstellt, können wir den Standardpfeil nicht entfernen (was bedeuten würde, dass wir jetzt zwei Pfeile haben), aber wir könnten einen funky Internet Explorer 9-Selektor verwenden.
Um zumindest unseren benutzerdefinierten Pfeil rückgängig zu machen, lassen Sie den Standardauswahlpfeil intakt.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Alle zusammen:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Diese Lösung ist einfach und bietet eine gute Browserunterstützung - sie sollte im Allgemeinen ausreichen.
Wenn Browserunterstützung für Internet Explorer 9 (und höher) und Firefox 34 (und höher) erforderlich ist, lesen Sie weiter ...
Lösung 2 Schneiden Sie das Auswahlelement ab, um den Standardpfeil ( Demo ) auszublenden.
- -
(Lesen Sie hier mehr)
Wickeln Sie das selectElement in ein div mit einer festen Breite und overflow:hidden.
Geben Sie dem selectElement dann eine Breite von etwa 20 Pixel, die größer als das div ist .
Das Ergebnis ist, dass der Standard-Dropdown-Pfeil des selectElements (aufgrund des overflow:hiddenauf dem Container) ausgeblendet wird und Sie jedes gewünschte Hintergrundbild auf der rechten Seite des Div platzieren können.
Der Vorteil dieses Ansatzes besteht darin, dass er browserübergreifend ist (Internet Explorer 8 und höher, WebKit und Gecko ). Der Nachteil dieses Ansatzes ist jedoch, dass das Options-Dropdown-Menü auf der rechten Seite herausragt (um die 20 Pixel, die wir ausgeblendet haben ... weil die Optionselemente die Breite des Auswahlelements annehmen).
[Es sollte jedoch beachtet werden, dass, wenn das benutzerdefinierte Auswahlelement nur für mobile Geräte erforderlich ist - das oben genannte Problem nicht auftritt -, da jedes Telefon das Auswahlelement nativ öffnet. Für Mobilgeräte ist dies möglicherweise die beste Lösung.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Wenn der benutzerdefinierte Pfeil in Firefox - vor Version 35 - erforderlich ist , Sie jedoch keine alten Versionen von Internet Explorer unterstützen müssen, lesen Sie weiter ...
Lösung 3 - Verwenden Sie die pointer-eventsEigenschaft ( Demo )
- -
(Lesen Sie hier mehr)
Die Idee hier ist, ein Element über den nativen Dropdown-Pfeil zu legen (um unser benutzerdefiniertes zu erstellen) und dann Zeigerereignisse darauf zu verbieten.
Vorteil: Es funktioniert gut in WebKit und Gecko. Es sieht auch gut aus (keine hervorstehenden optionElemente).
Nachteil: Internet Explorer (Internet Explorer 10 und niedriger) wird nicht unterstützt pointer-events, dh Sie können nicht auf den benutzerdefinierten Pfeil klicken. Ein weiterer (offensichtlicher) Nachteil dieser Methode ist, dass Sie Ihr neues Pfeilbild nicht mit einem Hover-Effekt oder einem Handcursor anvisieren können, da wir gerade Zeigerereignisse deaktiviert haben!
Mit dieser Methode können Sie jedoch Modernizer oder bedingte Kommentare verwenden, um Internet Explorer auf den integrierten Standardpfeil zurückzusetzen.
NB: Da Internet Explorer 10 nicht mehr unterstützt wird conditional comments: Wenn Sie diesen Ansatz verwenden möchten, sollten Sie wahrscheinlich Modernizr verwenden . Es ist jedoch weiterhin möglich, das Zeigerereignis-CSS mit einem hier beschriebenen CSS-Hack aus Internet Explorer 10 auszuschließen .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->