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)