Stil için CSS-sadece bir yolu <select> bir açılan var mı?

<select> bir form insanca mümkün olduğunca, herhangi bir JavaScript olmadan stile ihtiyacım var. Yani CSS yapmak için kullanabilirim özellikleri nelerdir?

Bu kod, tüm büyük tarayıcıları ile uyumlu olması gerekir:

• Internet Explorer 6,7 ve 8
• Firefox
• Safari

JavaScript ile bunu yapabilirim biliyorum: Example.

Ve sade tasarımı bahsetmiyorum. Birlikte yapabileceğimiz en iyi şey sadece CSS ne olduğunu bilmek istiyorum.

Yığın Taşması similar questions buldum.

Ve this one doctype.com.

Önemli Güncelleme!

Firefox V35 olarak y ek olarak, appearance Bu özelliği kullanmak mümkün olacak.

(Yukarıdaki linkten:)

Bir combobox none değer -moz-appearance şimdi Kaldır açılan düğme

Varsayılan stil seçmek bizim eleman üzerinde aşağıdaki kurallara ekleme kadar kolay gizlemek için şimdi de:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

IE 11 desteği, ::-ms-expand kullanabilirsiniz.

select::-ms-expand { /* for IE 11 */
    display: none;
}

Adım #1 -FIDDLE

Gelecek, kendi özel ok eklemek için sadece bir arka plan görüntüsü eklemek.

Adım #2 -FIDDLE

Şimdi sorun, YANİ herhangi bir sürümü şu anda görünüm özelliği destekler.

YANİ arka plan görüntüyü silmek için var

#3 (FİNAL) adımFIDDLE

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  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;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  select {
    background: none;
    padding: 5px;
  }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Burada seçin bir öğe üzerinde özel bir ok elde etmek için iki ek çözümler:

#1 - varsayılan ok - (Source) Gizle

FIDDLE

Bir ile bir div select eleman sarıngenişliği sabit23**.

Sonra select öğe genişliği yaklaşık verin20 piksel div büyüktür.

Sonucu olduğu varsayılan açılır ok select unsur olacak gizli (nedeniyle overflow:hidden konteyner), ve herhangi bir arka plan görüntü üzerinde sağ-yan div.

avantajçapraz tarayıcı (Internet Explorer 8 ve üstü, WebKit Gecko) bu yaklaşım. Ancakdezavantajbu yaklaşım seçenekleri açılır jak dışarı sağ tarafı (20 piksel olan sakladık... çünkü seçenek öğeleri alın genişliği seçin element).

[Özel seçin öğesi için gerekli ise, ancak, belirtilmelidirMOBİLbu yukarıdaki sorun geçerli değil - telefon doğal olarak seçin öğesi açılır her yol yüzünden. Cep telefonu için, bu muhtemelen en iyi çözümdür.]

.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>

#2 - 44* *pointer-events özelliği Kullanın

FIDDLE

Burada fikir kaplaması yerli listeden bir öğe ok (bizim özel oluşturmak için, ve işaretçi olaylar izin vermemek.

Avantajı:Y ve Gecko olarak iyi çalışıyor. İyi de (option öğeleri dışarı çıkık yok) görünüyor

Dezavantajı:Internet Explorer (IE10 ve aşağı) özel oku düşemezsin pointer-events, desteklemiyor. Ayrıca, bu yöntem ile (ortada) başka bir dezavantajı sadece onlara işaretçi olayları devre dışı olduğumuz için vurgulu bir etkisi veya el imleci ile yeni ok görüntü hedef, yapamazsın!

Ancak, bu yöntem ile Modernizer veya şartlı yorumlar Internet Explorer standart ok dahili dönmesi için kullanabilirsiniz.

NB:Eğer yaklaşım muhtemelen kullanmalısınız #2, kullanmak istiyorsanız . 10 conditional comments artık desteklemiyor Explorer Internet: ^strong>Modernizr. Ancak, yine de olası hack here açıklanan bir CSS ile Internet Explorer işaretçi olaylar CSS 10 dahil edilmiştir.

.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]-->