下拉透明度顯示爲黑色的使用RGBA

在HTML表單，選擇下拉有以下CSS：下拉透明度顯示爲黑色的使用RGBA

input[type="text"], textarea, select, option { 
    border:none; 
    padding:5px; 
    font-size:14px; 
    color: #000; 
    background: rgba(0, 0, 0, 0.1); 
}

的rgba是黑色的10％的透明度，

在大多數的「真正的「瀏覽器，它完美的作品，但不是在Chrome和IE9

簡單的問題，增加/修改什麼規則來解決？

這是Fiddle。

我得到了一個「好問題」和小提琴，但現在，任何一個可以幫我解決？我真的是HTML世界中的樣式SELECT Dropdown？我猜不會！ :-)

來源

2013-03-19 menardmam

+1好問題！ – 2013-03-19 19:41:04

如果嘗試設置默認表單元素的樣式，那麼您的時間就會很糟糕。只是說。 – 2013-03-19 19:44:31

SELECT在瀏覽器中從來沒有可靠的風格，也沒有真正的意圖。它不是一個真正的HTML元素，它更像是一個依賴於操作系統的小部件。請參閱：http：//www.slideshare.net/jdmedina17/the-html-ltselect-tag – 2013-03-19 19:44:51

只是嘗試用下面的：

CSS部分：

解決方案＃1：

input[type="text"], textarea, select, option { 
    border:none; 
    padding:5px; 
    font-size:14px; 
    color: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.1); 
    /* Theoretically for IE 8 & 9 (more valid) */ 
    /* ...but not required as filter works too */ 
    /* should come BEFORE filter */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    /* This works in IE 8 & 9 too */ 
    /* ... but also 5, 6, 7 */ 
    filter: alpha(opacity=50); 
    /* Older than Firefox 0.9 */ 
    -moz-opacity:0.5; 
    /* Safari 1.x (pre WebKit!) */ 
    -khtml-opacity: 0.5; 
    /* Modern! 
    /* Firefox 0.9+, Safari 2?, Chrome any? 
    /* Opera 9+, IE 9+ */ 
    opacity: 0.5; 
}

解決方案2：

input[type="text"], textarea, select, option { 
    border:none; 
    padding:5px; 
    font-size:14px; 
    color: #000000; 
    background: rgba(0, 0, 0, 0.1);  
} 
select 
{ 
    -webkit-appearance: none; 
} 

This second solution will work perfectly, except the dropdown arrow, we need to set the dropdown arrow image via background url css. because chrome where defaultly applying the **User Agent Stylesheet** for Select Dropdown Elements.

請參考以下位置：

（1）。 What is user agent stylesheet ?

（2）。 CSS2.1 User Agent Style Sheet Defaults ?

（3）。 User Agent Style Sheets: Basics and Samples ?

HTML部分：

<select> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    <option value="4">Option 4</option> 
</select>

我認爲這可以幫助你解決你的問題。

來源

2013-03-20 05:08:16

下拉透明度顯示爲黑色的使用RGBA

回答

相關問題