html - 具有透明度的下拉菜单使用 RGBA 显示为黑色

Question

在 html 表单中，SELECT 下拉菜单具有以下 CSS:

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

rgba黑色 10% 透明度，

在大多数“Real”浏览器中它都能完美运行，但在 Chrome 和 IE9 中却不行

简单的问题，要添加/修改什么规则来解决这个问题？

这是一个Fiddle .

---

我有一个“好问题”和一个 fiddle ，但现在，任何人都可以给我一个解决方案吗？。在 HTML 世界中，我真的是为 SELECT Dropdown 设计样式的人吗？我猜不会 ! :-)

Answer 1

只需尝试以下操作:

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>

我认为这可能会帮助您解决问题。