Question

I’m looking for a way to make semi-transparent form elements in HTML.

I know that CSS3 has the lovely background-color:rgba(r,g,b,a) option, and equally using a semi-transparent .png as a background image usually works, however I can’t get it to work for the element.

I’m mainly targeting modern browsers (IE9 and updated versions of FF/Chrome/Safari), and I’m not too fussed for the solution to be backwards-compatible (degrading to a solid color is fine). Even a solution that works in some of these would be acceptable, especially if it’s expected that future versions of the other browsers will support it (I’m looking at you IE!).

Answer 1

Don’t go for the background-color:rgba, use opacity:x instead. IE9, Chrome, FF, Opera and Safari use this for transparency.
For example:

<select style="opacity:0.5;">

Opacity takes values between 0 (full transparent) and 1.

Although you’re mainly targeting modern browsers, for IE8 and earlier you have to use filter:alpha(opacity=50) (with respect to the above example; opacity here accepts values between 0 and 100).

So in conclusion

<select style="opacity:0.5;filter:alpha(opacity=50);">

gives you a semi-transparent select control supported by modern browsers plus IE8 and earlier.

With this technique, the selects childs options will also gain the specified opacity, so the text of the option-tags will be faded out, too.
Mikkel Fausing found out that using background-color:rgba(r,g,b,a) in combination with -webkit-appearance: none; doesn’t fade the text, but – if applied to a select – it removes the little arrow indicating that this control is a dropdownbox. For example:

<select style="background-color:rgba(0, 0, 0, 0.2); -webkit-appearance:none;">