SORU
13 Aralık 2009, Pazar


Nasıl stil için bir <select> sadece JavaScript olmadan CSS ile açılır?

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.

CEVAP
20 Aralık 2012, PERŞEMBE


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


Eğer özel oku Firefox IE veya gerekli ise - V35 - o zaman önce okumaya devam edin...

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

enter image description here

[Ö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]-->

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • jeffisthecoolguy

    jeffisthecoo

    17 HAZİRAN 2013
  • julioissk84life

    julioissk84l

    18 ŞUBAT 2008
  • Modus Recordings

    Modus Record

    26 Kasım 2008