Image de fond Sélectionnez (menu déroulant) ne fonctionne pas dans Chrome

Je veux utiliser une image pour l'arrière-plan d'une sélection/menu déroulant. Le CSS suivant fonctionne très bien dans Firefox et IE, mais ne pas Chrome:Image de fond Sélectionnez (menu déroulant) ne fonctionne pas dans 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;}

Source

2010-02-09 Ashish

En général, il est considéré comme une mauvaise pratique au style des contrôles de formulaire standard, car la sortie est si différent sur chaque navigateur. Voir: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ pour certains exemples rendus.

Cela étant dit, j'ai eu un peu de chance faire la couleur de fond 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 rend encore un dégradé sur le dessus de l'image d'arrière-plan dans la couleur que vous passez à rgba (r, g, b, 0.1) mais en choisissant une couleur qui complimente votre image et en faisant l'alpha 0.1 réduit l'effet de ceci.

Source

2010-02-12 21:49:52

Ajout hauteur de la ligne de classe appliqué pour sélectionner l'élément résout le problème. Merci. –

Qu'est-ce que Arne dit - vous ne pouvez pas sélectionner de manière fiable des boîtes de style et leur demander de regarder quelque chose comme uniforme d'un navigateur.

Uniforme: https://github.com/pixelmatrix/uniform est une solution javascript qui vous donne un bon contrôle graphique sur vos éléments de formulaire - c'est toujours Javascript, mais il est à peu près aussi agréable que javascript obtient pour résoudre ce problème.

Source

2010-05-17 16:13:36 Beejamin

merci pour cette gemme. a rendu ma vie beaucoup plus facile – heymrcarter

merci. très bien ... – AEMLoviji

select 
{ 
    -webkit-appearance: none; 
}

Si vous le souhaitez, vous pouvez également ajouter une image qui contient la flèche dans le cadre de l'arrière-plan.

Source

2011-05-12 03:24:09

+13

btw - cela supprimera votre graphique flèche vers le bas sur sélectionner aussi. – easwee

car il y aura un fond, qui peut clairement faire partie de l'image de fond. –

Je préfère toujours la solution à la prédication! +1 – kaustubh

vous pouvez utiliser le ci-dessous 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

ici est la solution pour Firefox 30. petite astuce pour la coutume sélectionnez les éléments dans firefox: -moz-any() pseudo-classe css.

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

Source

2014-06-12 09:55:30 kva

Image de fond Sélectionnez (menu déroulant) ne fonctionne pas dans Chrome

Répondre

Questions connexes