html - 是否可以在选择中将 rgba 背景设置为选项?

标签 html css

<分区>

我一直在尝试更改 select 属性中选项的默认背景白色,但没有成功。我试图为我的选择属性添加一个 rgba 颜色,但它不接受它和我的背景图像(下拉箭头),所以我用一个 div 包裹它并给它我的背景 rgba 颜色,你可以在这里看到:

<div class="language-dropdown">
    <label>
        <select class="language-select">
            <option class="language-option" selected>English</option>
            <option class="language-option">Italian</option>
            <option class="language-option">Russian</option>
        </select>
    </label>
</div>

当我尝试将背景 rgba 赋予 .language-option 时,它不会改变任何东西,但是,如果我给它一个常规颜色,例如 background:red;,它会起作用。

.language-dropdown {
    background: rgba(255, 255, 255, 0.4);
    display: inline-block;
}
.language-select {
    background: url("http://s10.postimg.org/otetjsoat/language_Arrow.png") no-repeat right;
    background-size: auto 42%;
    width: 88px;
    background-position-x: 73px;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #fff;
    border: none;
    text-indent: 0.01px;

    padding-left: 5px;
}
.language-option {
    background-color: rgba(255, 255, 255, 0.4);
    /*WONT WORK!!! , but "background-color:red;"  will*/
}

注意:适用于 Firefox,但不适用于 Chrome!

你可以找到我的整个 fiddle here

最佳答案

它工作正常 with pink color, for example , 你只需要设置一个非白色的透明颜色。

.language-option {
    background-color: rgba(212, 31, 31, 0.48);
}

关于html - 是否可以在选择中将 rgba 背景设置为选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31906227/

相关文章:

javascript - 如何将选定复选框的值发送到 app.get 路由

javascript - bxSlider:改变 li 元素的顺序

javascript - 图像在 hover+grow 上跳出其绝对位置

jquery - 多次setTimeout

html - Bootstrap 列布局

javascript - 带子菜单的下拉菜单

javascript - bootstrap.min.js 3.0.0 中缺少 jQuery

javascript - 如何使用 CSS 或 jQuery 或 JavaScript 对齐箭头

javascript - Facebook 如何将工具栏保留在页面底部?

html - 平板电脑/手机屏幕上的网站页面仅显示左上角(需要 : page is minimized to fit the screen and can be zoom-ed)