Question

我一直在尝试更改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时，它不会改变任何东西，但是，如果我给它一个常规颜色，例如背景：红色;它可以工作。

.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！

你可以找到我的整个小提琴here

Answer 1

它工作正常with pink color, for example，您只需要设置非白色透明色。

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

Answer 2

因为255,255,255--它是白色的:)当然你看不到任何东西！这是answer

.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(0, 0, 0, 0.4);
}

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

Answer 3

.language-option {
    background-color: rgba(255, 0, 0, 0.4);
}

此代码有效。它是红色的，不透明度为40％。

你的rgba颜色rgba(255, 255, 255, 0.4)是白色的...你不会看到任何差异，因为背景也是白色的。

在这里，您可以尝试使用RGBa并立即查看它的作用：http://www.webopacity.net/RGBA.html

可以在选择中选择rgba背景作为选项吗？

3 个答案: