1

在 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 中却不行

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

这是一个小提琴。

我有一个“好问题”和一个小提琴，但现在，任何人都可以给我一个解决方案吗？我真的是在 html 世界中设置 SELECT Dropdown 样式的人吗？我猜不会 ！:-)

4

1 回答 1

0

只需尝试以下内容：

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)。什么是用户代理样式表？

(2)。CSS2.1 用户代理样式表默认值？

(3)。用户代理样式表：基础和示例？

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-20T05:08:16.647 回答