27 votes

Image d'arrière-plan pour Sélectionner (liste déroulante) ne fonctionne pas dans Chrome

Je veux utiliser une image pour le fond d'un select/menu déroulant. Le code CSS suivant fonctionne très bien sous Firefox et IE, mais pas dans google Chrome:

#main .drop-down-loc { width:506px; height: 30px; border: none; 
  background-color: Transparent; 
  background: url(images/text-field.gif) no-repeat 0 0; 
  padding:4px; line-height: 21px;}

76voto

Danny G Points 2124
select 
{
    -webkit-appearance: none;
}

Si vous en avez besoin vous pouvez également ajouter une image qui contient la flèche, comme une partie de l'arrière-plan.

7voto

Beejamin Points 4637

Ce Arne dit - vous ne pouvez pas fiable style sélectionnez boîtes et avoir l'air de rien comme compatible sur tous les navigateurs.

Uniforme: http://pixelmatrixdesign.com/uniform/ est un javascript solution qui vous donne de bons graphiques de contrôle sur vos éléments de formulaire - il est toujours en Javascript, mais c'est à peu près aussi agréable que le javascript pour la résolution de ce problème.

4voto

Généralement, il est considéré comme une mauvaise pratique de style standard de contrôles de formulaire, parce que la sortie air si différente sur chaque navigateur. Voir: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ pour certains rendus des exemples.

Cela étant dit, j'ai eu un peu de chance faire de la couleur d'arrière-plan d'une valeur RGBA:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #d00;
      }
      select {
        background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0; 
        padding:4px; 
        line-height: 21px;
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Foo</option>
      <option>Bar</option>      
      <option>Something longer</option>     
  </body>
</html>

Google Chrome encore rend un dégradé sur le dessus de l'image de fond dans la couleur que vous passez à rgba(r,g,b,0.1), mais en choisissant une couleur qui complimente votre image et de faire de l'alpha 0.1 réduit l'effet de cette.

2voto

kva Points 45

vous pouvez utiliser le dessous des styles css pour tous les navigateurs, sauf Firefox 30

select {
  background: url(dropdown_arw.png) no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 90px;
  text-indent: 0.01px;
  text-overflow: "";
}

page de démonstration - http://kvijayanand.in/jquery-plugin/test.html

Mise à jour

voici la solution pour Firefox 30. petite astuce pour coutume de sélectionner des éléments dans firefox :-moz-tout() css pseudo classe.

http://blog.kvijayanand.in/customize-select-arrow-css/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X