Arka plan resmi Seç (açılır) özelliği çalışmıyor Chrome

Seç/açılır arka plan için bir resim kullanmak istiyorum. Aşağıdaki CSS Firefox ve IE çalışıyor, ancak Chrome'da yapmaz:Arka plan resmi Seç (açılır) özelliği çalışmıyor Chrome

#main .drop-down-loc { width:506px; height: 30px; border: none; 
    background-color: Transparent; 
    background: url(images/text-field.gif) no-repeat 0 0; 
    padding:4px; line-height: 21px;}

kaynak

2010-02-09 Ashish

Genellikle çıkış her tarayıcıda çok farklı görünüyor çünkü stil standart form kontrollerine kötü uygulama olarak kabul edilir. Bazı işlenmiş örnekler için bkz: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     body { 
     background: #d00; 
     } 
     select { 
     background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0; 
     padding:4px; 
     line-height: 21px; 
     border: 1px solid #fff; 
     } 
    </style> 
    </head> 
    <body> 
    <select> 
     <option>Foo</option> 
     <option>Bar</option>  
     <option>Something longer</option>  
    </body> 
</html>

Google Chrome hala sen RGBA geçmesi renkte arka plan resminin üstüne bir gradyan vermektedir

söyleniyor, ben arka plan rengini bir RGBA değeri yapma biraz şans yaşadım r, g, b, 0,1) ancak görüntünüzü tamamlayan ve alfa 0.1'in yapılmasını sağlayan bir renk seçerek bunun etkisini azaltır.

kaynak

2010-02-12 21:49:52

ekleme satır yüksekliği sorunu çözer. Teşekkürler. Bu gem için –

Ne Arne demişti - güvenilir bir şekilde seçili kutuları seçemez ve tarayıcılar arasında tutarlı bir şey gibi görünmesini sağlayamazsınız.

Üniforma: https://github.com/pixelmatrix/uniform, form öğeleriniz üzerinde iyi grafik denetimi sağlayan bir javascript özümdür - hala JavaScript'tir, ancak javascript'in bu sorunu çözmek için aldığı kadar iyidir.

kaynak

2010-05-17 16:13:36 Beejamin

teşekkürler. Hayatım çok daha kolay – heymrcarter

teşekkürler. Çok iyi ... – AEMLoviji

select 
{ 
    -webkit-appearance: none; 
}

İhtiyacınız varsa, oku içeren bir görüntüyü arka planın parçası olarak da ekleyebilirsiniz.

kaynak

2011-05-12 03:24:09

+13

btw - bu da seçiminizdeki aşağı ok grafiğini kaldıracaktır. – easwee

bir arka plan olacağından, bu arka plan görüntüsünün bir parçası olabilir. –

Her zaman vaaz üzerinden çözüm tercih ederim! +1 – kaustubh

Eğer

select { 
    background: url(dropdown_arw.png) no-repeat right center; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    width: 90px; 
    text-indent: 0.01px; 
    text-overflow: ""; 
}

Firefox 30 dışındaki tüm tarayıcılar için tanıtım sayfası css stilleri aşağıda kullanabilirsiniz - Güncelleme http://kvijayanand.in/jquery-plugin/test.html

burada

özel Firefox 30. küçük numara için çözüm firefox'taki elemanları seçin: -moz-any() css sözde sınıfı. öğeyi seçmek için uygulanan sınıfına

http://blog.kvijayanand.in/customize-select-arrow-css/

kaynak

2014-06-12 09:55:30 kva

Arka plan resmi Seç (açılır) özelliği çalışmıyor Chrome

cevap

İlgili konular