Home/ Questions/Q 6565819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:08:33+00:00

HTML <select data-val=true id=GameID > <option value=>Select Game…</option> <option value=4>Counter Strike Source</option> <option value=5>Medal

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0