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;}
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.
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.
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.
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.
