Is it possible to put rgba background for option in select?

Question

I have been trying to change the default background white color of the option inside the select property, but with no success. I tried to put to my select property an rgba color but it just won't accept it together with my background image(dropdown arrow) so i wrapped it with a div and gave it my background rgba color as you can see here:

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

When I try to give background rgba to .language-option it just won't change anything, but, if I give it a regular color, for exmaple background:red;, it works.

.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*/
}

Note: Works on Firefox, while not on Chrome!

You can find my whole fiddle here

I am on Chrome and the alpha part doesn't seem to be working as expected. It is getting treated as though the color is just white. — Harry, Aug 09 '15 at 16:18
Transparent white with white text, so the whole thing just looks white for me on Chrome. — Jon, Aug 09 '15 at 16:19
@AkulVonItram I have checked it on firefox and it does work, but not on chrome. other solution? — Roni Litman, Aug 09 '15 at 16:21

score 2 · Answer 1 · answered Aug 09 '15 at 16:21

2

it works fine with pink color, for example, you just have to set a non-white transparency color.

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

answered Aug 09 '15 at 16:21

Dmitry Sadakov

2,128
3
19
34

score 2 · Answer 2 · answered Aug 09 '15 at 16:22

Because 255, 255, 255 - it's white:) Of course you can't see anything! Here is 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>

Cool! Strange that it works on firefox though. The color is close enough. Thanks!! — Roni Litman, Aug 09 '15 at 16:25

score 2 · Answer 3 · answered Aug 09 '15 at 16:26

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

This code works. It's red with a 40% opacity.

You'r rgba color rgba(255, 255, 255, 0.4) is white... You won't see any difference because the background is also white.

Here you can experiment with RGBa and instantly see what it does: http://www.webopacity.net/RGBA.html

Is it possible to put rgba background for option in select?

3 Answers3