CSS background-image issue for <select> & <option>
Solution 1
Its not that easy to change form element's style.. each browser has it's own way to render and create those elements. Some browsers will accept having a background image inside your select, others won't.
A simple technique is to add a default color, so the browser will render the color if it cant render the image.
background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;
so this way, firefox users will see a background image (something that always looks ugly, in my opinion) and the rest of the browsers will display with a gray background.
Hope this helps
Solution 2
Your alpha transparency is set to 0 in the RGBa
values, this means that it will be completely transparent/not visible, this needs to be set to 1 for it to be visible.
Also, you need to put your RGBa
value before the url('image.jpg')
.
Solution 3
Like the previous post: color comes before image url. in stead of rgba(0,0,0,0) you better use the word "transparent", as that would be better compatible.
Artur Keyan
Updated on December 13, 2020Comments
-
Artur Keyan over 3 years
HTML
<select data-val="true" id="GameID" > <option value="">Select Game...</option> <option value="4">Counter Strike Source</option> <option value="5">Medal Of Honor</option> <option value="6">NFS Shift</option> </select>
CSS
select { color: #fff; background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); border: 1px solid #8093BE; width: 242px; height: 20px; } option { background: url(/img/backgrounds/tab-hover-background.png) rgba(0,0,0,0); }
- In Firefox it works fine,
- In Opera it works only for select,but not for option
- In IE 9.0 & Chrome it has a strange behavior
I want all browsers to display like Firefox
this is a source