Flèche de sélection manquante sur Safari Windows

Question

J'ai ajouté un peu de style aux sélections en utilisant la classe suivante:

.form-fields select {
height: 24px;   
background: url(/Images/ui/input-bg.jpg) #FFF repeat-x;  
border: 1px solid #AAA;
}

Cela fonctionne dans tous les navigateurs sauf qu'il provoque Safari sur Windows à omettre une flèche de liste déroulante. Si je commente à la fois les propriétés de background et de bordure (et uniquement les deux), la flèche est restaurée mais la hauteur est ignorée dans tous les autres navigateurs.

J'aimerais conserver ce style car Windows Safari est une minorité mais je suis curieux de savoir s'il existe une solution qui fonctionne pour tous.

Answer 1

Placez ceci dans votre css

*{
 -webkit-appearance: menulist;
}

Answer 2

J'avais le même bug sur iPhone iOS. J'ai supprimé un style background-color:transparent; et cela a corrigé la disparition de la flèche de sélection dans l'interface du navigateur.

Answer 3

J'ai essayé le code ci-dessus mais cela ne fonctionnait pas pour l'interface utilisateur qui a été créée en utilisant jquery.min.css. J'ai essayé le code CSS ci-dessous et cela a résolu mon problème. Je cible ui-icon-carat-d qui affiche une flèche de liste déroulante

.ui-icon-carat-d:after{
                background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
                background-repeat: no-repeat !important;
                background-color: #fff !important;
        }