Can't make rgba() background-colour on select element work in Chrome

Question

Chrome Version 16.0.912.75 m running on Vista.

I'm trying to apply an rgba background colour to a disabled select element, with the opacity at 0.2.

It works fine in Firefox and Opera, but Chrome ignores the opacity, and just shows flat colour. I've already tried adding -webkit-appearance: none. This fixes the alpha value, but removes the button part fo the select element from view.

Does anyone know how how to have a background with an alpha value, and not hide the button part of select?

http://jsfiddle.net/EMSmZ/9/ <== I've edited this to confirm that rgba is otherwise working for background colour, but not for select. The two boxes have different background transparencies in Chrome, but the selects don't.

---

Still nothing, submitted a bug report: http://code.google.com/p/chromium/issues/detail?id=110437

Answer 1

I hate to break this to you, but styling form elements with CSS is just a bag of hurt. There's a reason everyone uses Javascript replacement techniques to change the look and feel of form elements.. (except text and text area essentially)

Answer 2

I ran into the same problem developing a form for a client. The workaround I ended up using was to set the background-color to a lighter version ( #faebe7 ) of whatever base I color I wanted to use, in this case red, rather than using rgba(255,0,0,0.4) .

Answer 3

not working as is in chrome 16.0.912.75 m on XP. IF you give the disabled 'opacity:.2; it changes the opacity of the whole element. Not sure what effect you are trying to achieve, maybe show some context to help offer a solution.