是否可以在选择中放置 rgba 背景作为选项？ [复制]答案

【问题标题】：Is it possible to put rgba background for option in select? [duplicate]是否可以在选择中放置 rgba 背景作为选项？ [复制]
【发布时间】：2015-11-01 13:56:06
【问题描述】：

我一直在尝试更改 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>

当我尝试为 .language-option 提供背景 rgba 时，它不会改变任何东西，但是，如果我给它一个常规颜色，例如 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 上无效！

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

【问题讨论】：

我在 Chrome 上，alpha 部分似乎没有按预期工作。它被视为颜色只是白色。
对我来说在 Firefox 中也能正常工作。
透明的白色和白色的文字，所以我在 Chrome 上看起来整个东西都是白色的。
@AkulVonItram 我已经在 Firefox 上检查过，它确实可以工作，但在 chrome 上不行。其他解决方案？

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

酷！奇怪的是它可以在 Firefox 上运行。颜色足够接近。谢谢！！

【解决方案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

【讨论】：