CSS background-image question pour <select> & <option>

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); 
}
  • Dans Firefox, il fonctionne très bien,
  • À l'Opéra, il ne fonctionne que pour certains,mais pas pour l'option
  • Dans IE 9.0 & Chrome il a un comportement étrange
    Je veux tous les navigateurs pour afficher comme Firefox

cette est une source

OriginalL'auteur Artur Keyan | 2011-09-12

  1. 4

    Ce n'est pas si facile de changer de forme de l'élément de style.. chaque navigateur a ses propre façon d'afficher et de créer ces éléments. Certains navigateurs acceptent d'avoir une image de fond à l'intérieur de votre sélectionnez, les autres ne sont pas.

    Une technique simple consiste à ajouter une valeur par défaut de la couleur, de sorte que le navigateur va rendre la couleur si elle ne peut pas le rendu de l'image.

    background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;

    ainsi, de cette façon, les utilisateurs de firefox verrez une image d'arrière-plan (quelque chose qui ressemble toujours moche, à mon avis) et le reste des navigateurs afficheront avec un fond gris.

    Espère que cette aide

    OriginalL'auteur pleasedontbelong

  2. 1

    Votre transparence alpha est mis à 0 dans la RGBa valeurs, cela signifie qu'il sera complètement transparent/pas visible, ce qui doit être mis à 1 pour qu'elle soit visible.

    Aussi, vous avez besoin de mettre votre RGBa de la valeur avant de la url('image.jpg').

    OriginalL'auteur no.

  3. 1

    Comme le post précédent: la couleur vient avant l'url de l'image.
    au lieu de rgba(0,0,0,0) vous feriez mieux d'utiliser le mot "transparent", ce serait mieux compatibles.

    OriginalL'auteur Leo