İşte üç çözüm:
Çözüm # 1 - Görünüm: Yok - Internet Explorer 10-11 Geçici Çözümü ile ( Demo )
-
appearance: noneSeçme öğesinde ayarlanan varsayılan oku gizlemek için ,background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Tarayıcı Desteği:
appearance: noneçok iyi tarayıcı desteğine ( caniuse ) sahiptir - Internet Explorer 11 (ve üstü) ve Firefox 34 (ve üstü) hariç.
Bu tekniği geliştirebilir ve ekleyerek Internet Explorer 10 ve Internet Explorer 11 için destek ekleyebiliriz
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Internet Explorer 9 bir endişe kaynağıysa, varsayılan oku kaldırmamız mümkün değildir (bu, şimdi iki okumuz olacağı anlamına gelir), ancak korkak bir Internet Explorer 9 seçicisini kullanabiliriz.
En azından özel okumuzu geri almak için - varsayılan seçme okunu olduğu gibi bırakarak.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Hep birlikte:
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>
Bu çözüm kolaydır ve iyi tarayıcı desteğine sahiptir - genellikle yeterlidir.
Internet Explorer 9 (ve üstü) ve Firefox 34 (ve üstü) için tarayıcı desteği gerekiyorsa, okumaya devam edin ...
Çözüm # 2 Varsayılan oku gizlemek için seçme öğesini kısaltın ( demo )
-
(Daha fazlasını buradan okuyun)
Sarma selectbir ile bir div elemanı sabit genişlik ve overflow:hidden.
Ardından selectöğeye div'den yaklaşık 20 piksel daha büyük bir genişlik verin .
Sonuç olarak, selectöğenin varsayılan açılır oku gizlenir ( overflow:hiddenkapsayıcıda olduğundan dolayı ) ve istediğiniz arka plan resmini div'in sağ tarafına yerleştirebilirsiniz.
Avantajı bu yaklaşımın bu çapraz tarayıcı (Internet Explorer 8 ve üstü, olmasıdır WebKit ve Gecko ). Bununla birlikte, bu yaklaşımın dezavantajı , seçenekler açılır menüsünün sağ tarafta çıkmasıdır (sakladığımız 20 piksel ile ... çünkü seçenek öğeleri seçme öğesinin genişliğini alır).
[Ancak, özel seçim öğesinin yalnızca mobil cihazlar için gerekli olması durumunda - yukarıdaki sorunun geçerli olmadığı - her telefonun doğal olarak seçme öğesini açma biçimi nedeniyle not edilmesi gerekir. Mobil cihazlar için bu en iyi çözüm olabilir.]
.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>
Firefox'ta ( Sürüm 35'ten önce) özel ok gerekiyorsa, ancak Internet Explorer'ın eski sürümlerini desteklemeniz gerekmiyorsa - okumaya devam edin ...
Çözüm # 3 - pointer-eventsMülkü Kullanın ( demo )
-
(Daha fazlasını buradan okuyun)
Buradaki fikir, bir öğeyi yerel açılır ok üzerine yerleştirmek (özel olanı oluşturmak için) ve ardından işaretçi olaylarına izin vermemektir.
Avantajı: WebKit ve Gecko'da iyi çalışır. Çok iyi görünüyor (çıkıntı optionelemanları yok).
Dezavantajı: Internet Explorer (Internet Explorer 10 ve aşağısı) desteklenmez pointer-events, yani özel oku tıklayamazsınız. Ayrıca, bu yöntemin bir diğer (belirgin) dezavantajı, yeni ok görüntünüzü bir fareyle üzerine gelme efekti veya el imleci ile hedefleyememenizdir, çünkü üzerlerindeki işaretçi olaylarını devre dışı bıraktık!
Ancak, bu yöntemle Internet Explorer'ın yerleşik ok standartlarına geri dönmesini sağlamak için Modernizer veya koşullu yorumları kullanabilirsiniz.
Not: Internet Explorer 10'un conditional commentsartık desteklemediği : Bu yaklaşımı kullanmak istiyorsanız, muhtemelen Modernizr'i kullanmalısınız . Bununla birlikte, burada anlatılan bir CSS kesmekle işaretçi olayları CSS'sini Internet Explorer 10'dan hariç tutmak mümkündür .
.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]-->