Sadece CSS ile bir “select” açılır listesini nasıl biçimlendiririz?

Sorunumuz şöyle, herhangi bir JavaScript olmadan, mümkün olduğunca bir forma stil vermem gerekiyor. CSS’de bunu yapmak için kullanabileceğimiz özellikler nelerdir?

Aynı zamanda bu kodun tüm büyük tarayıcılarla uyumlu olmasını istiyoruz.

İşte üç çözüm:

1. Çözüm – appearance: none – Internet Explorer 10 – 11 geçici çözümüyle  (Demo)

Select öğesinde varsayılan oku gizlemek için appearance: none kullanılır. Ardından ise background-image ile kendi özel okunuzu ekleyin.

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 sahiptir (caniuse).

Bu tekniği geliştirebilir ve aşağıdakileri 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 için endişeleniyorsak, varsayılan oku kaldırmanın hiçbir yolu yok (bu, artık iki okumuz olacağı anlamına gelir).

En azından özel okumuzu geri almak için – varsayılan seçme okunu olduğu gibi bırakın.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

Birleştirelim:

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(https://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 kolay ve de iyi bir tarayıcı desteğine sahip – genel itibariyle yeterli olacaktır.

Internet Explorer için tarayıcı desteği gerekiyorsa, okumaya devam edin.

2. Çözüm: Varsayılan oku gizlemek için seçme öğesini kısaltın (demo)

—

select öğesini sabit genişlikteki bir div ile sarın ve overflow:hidden ekleyin. Ardından, select öğesine div’den yaklaşık 20 piksel daha geniş bir genişlik verin.

Sonuç olarak, üst öğedeki overflow:hidden nedeniyle, select öğesinin varsayılan açılır oku gizlenir. İstediğiniz herhangi bir arka plan görüntüsünü div’in sağ tarafına yerleştirebilirsiniz.

Bu yaklaşımın avantajı tarayıcı desteği olmasıdır (Internet Explorer 8 ve üstü, WebKit ve Gecko). Bununla birlikte, bu yaklaşımın dezavantajı, seçenekler açılır menüsünün sağ taraftan dışarı çıkmasıdır (seçtiğimiz öğenin genişliğini aldığı için, sakladığımız 20 piksel ile…).

[Ancak, özel seçim öğesi yalnızca mobil cihazlar için gerekliyse – o zaman yukarıdaki sorun geçerli değil – çünkü her telefonun doğal olarak seçme öğesini açma biçimine dikkat edilmelidir. Dolayısıyla 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(https://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 özel ok gerekliyse – Sürüm 35’ten önce – ancak Internet Explorer’ın eski sürümlerini desteklemeniz gerekmiyorsa – okumaya devam edin…

Çözüm #3 – pointer-events özelliği kullanın (demo)

—

Buradaki fikir, varsayılan açılır okun üzerine bir öğe yerleştirmek ve ardından üzerinde fare olaylarına izin vermemektir.

Avantaj: WebKit ve Gecko’da iyi çalışır. Aynı zamanda iyi görünür (çıkıntılı option elemanlar yok).

Dezavantaj: Internet Explorer (Internet Explorer 10 ve aşağısı) pointer-events‘i desteklemez, bu da özel oku tıklayamayacağınız anlamına gelir. Ayrıca, bu yöntemin bir başka (bariz) dezavantajı da, yeni ok resminizi üzerine gelme efekti veya el imleci ile hedefleyememenizdir, çünkü işaretçi olaylarını daha yeni devre dışı bıraktık!

Ancak bu yöntemle, Internet Explorer’ın standart yerleşik oka dönmesini sağlamak için  Modernizr veya koşullu yorumları kullanabilirsiniz.

Not: Internet Explorer 10 conditional comments artık desteklemediği için bu yaklaşımı kullanmak istiyorsanız, muhtemelen Modernizr kullanmalısınız. 

.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(https://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]-->