Oto trzy rozwiązania:
Rozwiązanie nr 1 - Wygląd: brak - z obejściem programu Internet Explorer 10–11 ( Demo )
-
Aby ukryć domyślny zestaw strzałek appearance: nonena elemencie select, a następnie dodaj własną strzałkę niestandardową za pomocąbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Obsługa przeglądarki:
appearance: nonema bardzo dobrą obsługę przeglądarki ( caniuse ) - z wyjątkiem Internet Explorera 11 (i późniejszych) i Firefox 34 (i późniejszych).
Możemy ulepszyć tę technikę i dodać obsługę przeglądarki Internet Explorer 10 i Internet Explorer 11 poprzez dodanie
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Jeśli problem dotyczy programu Internet Explorer 9, nie mamy możliwości usunięcia domyślnej strzałki (co oznaczałoby, że mamy teraz dwie strzałki), ale możemy użyć funkcyjnego selektora programu Internet Explorer 9.
Aby przynajmniej cofnąć naszą niestandardową strzałkę - pozostawiając domyślną strzałkę nienaruszoną.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Wszyscy razem:
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>
To rozwiązanie jest łatwe i ma dobrą obsługę przeglądarki - ogólnie powinno wystarczyć.
Jeśli konieczna jest obsługa przeglądarki Internet Explorer 9 (i nowsze) i Firefox 34 (i nowsze), czytaj dalej ...
Rozwiązanie nr 2 Obetnij wybrany element, aby ukryć domyślną strzałkę ( wersja demonstracyjna )
-
(Przeczytaj więcej tutaj)
Zawiń selectelement w div o stałej szerokości i overflow:hidden.
Następnie nadaj selectelementowi szerokość około 20 pikseli większą niż div .
W rezultacie domyślna strzałka rozwijana selectelementu zostanie ukryta (ze względu overflow:hiddenna na pojemniku) i możesz umieścić dowolny obraz tła, który chcesz, po prawej stronie div.
Zaletą tego podejścia jest to, że z różnymi przeglądarkami (Internet Explorer 8 i nowsze, WebKit i Gecko ). Jednak wadą tego podejścia jest to, że lista rozwijana opcji wystaje po prawej stronie (o 20 pikseli, które ukryliśmy ... ponieważ elementy opcji przyjmują szerokość wybranego elementu).
[Należy jednak zauważyć, że jeśli niestandardowy element wyboru jest konieczny tylko dla urządzeń mobilnych - powyższy problem nie dotyczy - ze względu na sposób, w jaki każdy telefon natywnie otwiera element wyboru. Dla urządzeń mobilnych może to być najlepsze rozwiązanie.]
.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>
Jeśli niestandardowa strzałka jest niezbędna w przeglądarce Firefox - przed wersją 35 - ale nie musisz obsługiwać starych wersji programu Internet Explorer - czytaj dalej ...
Rozwiązanie nr 3 - Użyj pointer-eventswłaściwości ( wersja demonstracyjna )
-
(Przeczytaj więcej tutaj)
Chodzi o to, aby nałożyć element na natywną strzałkę rozwijaną (aby utworzyć naszą niestandardową), a następnie zabronić na nim zdarzeń wskaźnika.
Zaleta: Działa dobrze w WebKit i Gecko. Wygląda również dobrze (bez wystających optionelementów).
Wada: Internet Explorer (Internet Explorer 10 i nowsze) nie obsługuje pointer-events, co oznacza, że nie można kliknąć niestandardowej strzałki. Kolejną (oczywistą) wadą tej metody jest to, że nie można celować w nowy obraz strzałki za pomocą efektu aktywowania lub kursora ręki, ponieważ właśnie na nich wyłączyliśmy zdarzenia wskaźnika!
Jednak za pomocą tej metody można użyć Modernizatora lub komentarzy warunkowych, aby przywrócić Internet Explorera do standardowej wbudowanej strzałki.
Uwaga: Ponieważ Internet Explorer 10 już nie obsługuje conditional comments: jeśli chcesz skorzystać z tego podejścia, prawdopodobnie powinieneś skorzystać z Modernizr . Nadal możliwe jest jednak wykluczenie CSS-a ze wskaźnikami z Internet Explorera 10 za pomocą opisanego tutaj hacka CSS .
.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]-->