Select（下拉）的背景圖片在Chrome中不起作用

我想將圖片用於選擇/下拉菜單的背景。下面的CSS在Firefox和IE罰款，但在Chrome不會：Select（下拉）的背景圖片在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;}

來源

2010-02-09 Ashish

一般情況下，它被認爲是一個不好的做法，風格標準表單控件，因爲輸出看起來每個瀏覽器如此不同。有關一些渲染示例，請參閱：http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/。

話雖這麼說，我已經有一些運氣使背景色的RGBA值：

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

谷歌Chrome仍然會呈現在彩色背景圖像，你傳遞給RGBA頂部的梯度（ r，g，b，0.1），但是選擇一種顏色來補充圖像並使alpha 0.1減少這種效果。

來源

2010-02-12 21:49:52

將行高添加到應用於選擇元素的類可以解決問題。謝謝。 – 2014-02-12 10:39:33

Arne說了什麼 - 你無法可靠地設計選擇框的樣式，並讓它們在瀏覽器中看起來像一致。

統一：https://github.com/pixelmatrix/uniform是一個JavaScript解決方案，它可以讓您對錶單元素進行良好的圖形控制 - 它仍然是Javascript，但它的功能與JavaScript解決此問題的效果相當。

來源

2010-05-17 16:13:36 Beejamin

感謝這顆寶石。讓我的生活更輕鬆 – heymrcarter 2011-03-02 15:34:41

謝謝。非常好... – AEMLoviji 2011-06-24 06:35:40

select 
{ 
    -webkit-appearance: none; 
}

如果您需要，還可以添加包含箭頭的圖像作爲背景的一部分。

來源

2011-05-12 03:24:09

+13

順便說一句 - 這將刪除您選擇的向下箭頭圖形了。 – easwee 2011-07-04 15:06:20

因爲會有背景，可以清楚地成爲背景圖像的一部分。 – 2011-07-07 18:27:12

我總是比傳道更喜歡解決方案！ +1 – kaustubh 2012-03-22 06:51:18

您可以使用下面的CSS樣式對於所有瀏覽器，除了火狐30

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: ""; 
}

演示頁 - http://kvijayanand.in/jquery-plugin/test.html

更新

這裏是火狐30.自定義小竅門解決方案在Firefox中選擇元素：-moz-any（）css僞類。

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

來源

2014-06-12 09:55:30 kva

Select（下拉）的背景圖片在Chrome中不起作用

回答

相關問題