I am trying to make select's box background transparent through css. I am using background-color:transparent;. It is working for firefox but not for chrome. Any idea? Here is a live example. Thank you for your time!
Asked
Active
Viewed 4,159 times
1
DNA180
- 266
- 1
- 7
- 28
-
Chrome 25.0.1364.172 - Works for the select, not for the options – Maen Mar 19 '13 at 12:18
-
2@Bigood I'm using the same version of Chrome as you and the transparency *doesn't* work on either. For reference, solid colours work fine, but the alpha transparency is ignored too. `rgba(255, 0, 0, 0.5)` displays as `rgb(255,0,0)`. – James Donnelly Mar 19 '13 at 12:21
-
2Chrome 25.0.1364.172 m - Doesn't work on either for me – Bill Mar 19 '13 at 12:21
-
@Bigood: Is it working for you using `background-color:transparent;`??? – DNA180 Mar 19 '13 at 12:23
-
2@DNA180: you've just had two people using the exact same version telling you it doesn't. If it does indeed work for him it's probably some browser extension allowing it to happen. – James Donnelly Mar 19 '13 at 12:24
-
1I must correct myself : the `select` is black transparent : the `background-color` have an effect on it, as it is white if the property isn't applied. It is not fully transparent like Tyriar's fiddle. – Maen Mar 19 '13 at 12:26
1 Answers
1
You will probably find -webkit-appearance: none; useful. <select>s are notoriously difficult to style, you may want to consider making your own if you're after a non-custom look and feel.
.outter_div select {
-webkit-appearance: none;
}
Daniel Imms
- 47,944
- 19
- 150
- 166
-
1Good shout! You may want to add that this only styles the `select` and not the `option`s. – James Donnelly Mar 19 '13 at 12:27
-
It looks like it is the only way: http://stackoverflow.com/a/5972981/1156119 http://stackoverflow.com/a/4142698/1156119 – Daniel Imms Mar 19 '13 at 12:28
-
1I'll wait a bit more and if we don't get any better answer, I'll set this question as the correct answer! – DNA180 Mar 19 '13 at 12:41