Stack Overflow
Stack Overflow
  • Are you looking for this? http://jsfiddle.net/23SMa/ – irrelephant Nov 09 '12 at 08:41
  • @irrelephant I do not think it is a perfect solution because the text available inside select element (not in dropdown) is also not clearly visible enough.. just a suggestion friend... – Faizul Hasan Nov 09 '12 at 08:43
  • Indeed that does the job reasonably well, thanks for that! edit: Faizul is correct, it does fade out the text too, still it's better than nothing! – MPF Nov 09 '12 at 08:44

    • 1 Answers1

    2

    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;">
    KeyNone
    • 8,745
    • 4
    • 34
    • 51
    • Then [stackoverflow.com/questions/806000/](http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text) may help you. – KeyNone Nov 09 '12 at 08:59
    • I *think* I found a solution that works in IE9, FF and Chrome (not tested on Safari or Opera). The tricks seems to be using -webkit-appearance:none. I'm not quite sure if there's issues with that though, example below: http://jsfiddle.net/mikkelpf/3m3vT/ – MPF Nov 09 '12 at 09:03
    • -webkit-appearance:none will remove your arrow from the select dropdown.. isn't it?.. I already tried almost all the solution by taking more than 3 days and it make to learn a lot about select, checkbox and radio.. – Faizul Hasan Nov 09 '12 at 09:05
    • You're right, it removes the arrow as well. However, that's acceptable to me in the current scenario - even if it's generally a bad idea to do so. – MPF Nov 09 '12 at 09:12
    • @BastiM: Setting the Opacity will fade out the text too, and setting the – MPF Nov 09 '12 at 09:20
    • @MikkelFausing whatever you do you can't modify the select as your wish and its dropdown(options). I could not share my own plugin which I used is in jsFiddle (frankly do not know the reason).. if any ways exists let me know, I will send that plugin to you... – Faizul Hasan Nov 09 '12 at 09:24
    • For completeness I just added the -webkit-appearance:none; solution to the answer. – KeyNone Nov 09 '12 at 10:36
    • @BastiM I accepted your answer, because I believe the information in there is as close as it's possible to get at this point in time, unless you do what Faizul Hasan did and write your own UI elements (that's sidestepping the issue rather than solving it - though it's probably a good way to do it). I'm not sure what the "normal" way to do things is around here, being new, but I believe accepting an answer that's close is better than leaving it with no answer, as it may be "good enough" for certain use cases (it's acceptable for my current project). – MPF Nov 09 '12 at 11:07