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;}
InformationsquelleAutor Ashish | 2010-02-09
  1. 79
    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.

    • btw - cela permettra d'éliminer de votre flèche graphique sur une sélection de trop.
    • depuis, il y aura un arrière-plan, qui peut clairement être une partie de l'image d'arrière-plan.
    • Je préfère toujours la solution sur la prédication! +1
    • maintenant, pourquoi n'est-ce pas choisi comme la meilleure réponse?
    • Est-il un moyen de le faire dans Firefox ainsi ? Je meam faire de la flèche vers le bas à disparaître ...
    • Partiellement résout le problème de l'image de fond d'écran, mais introduit utilisabilité/forme de contrôle de la cohérence des questions, et vous oblige à considérer la flèche sélectionner qu'une partie de votre image d'arrière-plan. Pas l'idéal, mais il peut être bon dans certains cas.
    • Merci, cela a résolu le chrome question. J'ai eu l'image de flèche à mon image d'arrière-plan.

    InformationsquelleAutor Danny G
  2. 7

    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: https://github.com/pixelmatrix/uniform est une solution d'activer javascript 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.

    • merci pour ce petit bijou. rendu ma vie beaucoup plus facile
    • merci. très bon...
    InformationsquelleAutor Beejamin
  3. 4

    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.

    • L'ajout de la ligne de hauteur à la classe appliquée pour sélectionner l'élément de résoudre le problème. Merci.
    InformationsquelleAutor Arne Roomann-Kurrik
  4. 1

    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

    Mis à 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/

    • Ne fonctionne pas dans IE et dans MS Bord c'est l'affichage de texte en haut de l'arrière-plan
    InformationsquelleAutor kva