Question

在html FORM中，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％透明度，

在大多数“真实”浏览器中，它可以完美运行，但不适用于Chrome和IE9

简单的问题，添加/修改哪些规则来修复它？

这是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>

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

具有透明度的下拉列表使用RGBA显示为黑色

1 个答案: