A Dropdown with transparency show up as black using RGBA

Question

In a html FORM, the SELECT dropdown have the following CSS :

input[type="text"], textarea, select, option {
    border:none;
    padding:5px;
    font-size:14px;
    color: #000;
    background: rgba(0, 0, 0, 0.1);
}

The rgba is black 10% transparency,

In most of the "Real" browser it works perfectly, but not in Chrome and IE9

Simple question, what rule to add/modify to fix that ?

Here is a Fiddle.

I got a "good question" and a fiddle but now, any one can get me a solution ?. I am really the one in the html world to style SELECT Dropdown ? I guess not ! :-)

If you try to style default form elements you're gonna have a bad time. Just saying. — James Coyle, Mar 19 '13 at 19:44
SELECT has never been dependably styled across browsers, nor was it really intended to be. It's not really an HTML element, it's more of an operating-system-dependent widget. See: http://www.slideshare.net/jdmedina17/the-html-ltselect-tag — Diodeus - James MacFarlane, Mar 19 '13 at 19:44
first time i have heard that : operating-system-dependent widget — menardmam, Mar 19 '13 at 19:46
so you tell me to ADD a class to the hundred of INPUT html field ? what a job ! — menardmam, Mar 19 '13 at 19:48
@jimjimmy1995 You mean like the dozens of frameworks that do it e.g. [bootstrap](http://twitter.github.com/bootstrap/base-css.html#forms)? — Eonasdan, Mar 19 '13 at 19:56
I add a class to the SELECT and OPTION, but no luck. still BLACK ! — menardmam, Mar 20 '13 at 04:12

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Just Try With The Following :

CSS Part :

Solution #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;
}

Solution #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.

Please refer the following locations :

(1). What is user agent stylesheet ?

(2). CSS2.1 User Agent Style Sheet Defaults ?

(3). User Agent Style Sheets: Basics and Samples ?

HTML Part :

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

I think this may help you to resolve your problem.

A Dropdown with transparency show up as black using RGBA

1 Answers1