Sélectionnez le changement de style de flèche

J’essaie de remplacer la flèche d’une sélection par une image de moi-même. J’inclus le select dans un div de même taille, je définis l’arrière-plan du select comme transparent et j’inclus une image (de la même taille que la flèche) dans le coin supérieur droit du div comme arrière-plan.

Cela ne fonctionne que dans Chrome.

entrer la description de l'image ici

Comment puis-je le faire fonctionner dans Firefox et IE9 où je reçois ceci:

entrer la description de l'image ici

.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; } 
     

Select steam

Avez-vous essayé quelque chose comme ça:

 .styled-select select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; } 

N’a pas testé, mais devrait fonctionner.

EDIT : On dirait que Firefox ne supporte pas cette fonctionnalité avant la version 35 ( lisez plus ici )

Il y a une solution de contournement ici , jetez un oeil à jsfiddle sur ce poste.

Voici un correctif élégant qui utilise un intervalle pour afficher la valeur.

La mise en page est comme ceci:

 

JsFiddle

Travailler avec une seule classe:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; } 

http://jsfiddle.net/qhCsJ/4120/

J’ai configuré une select avec une flèche personnalisée similaire à la réponse de Julio, mais elle n’a pas de largeur définie et utilise un svg comme image d’arrière-plan. ( arrow_drop_down des arrow_drop_down de matériel-ui)

 select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; } 

entrer la description de l'image ici

Si vous en avez besoin pour travailler également dans IE, mettez à jour la flèche svg vers base64 et ajoutez ce qui suit:

 select::-ms-expand { display: none; } background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); 

Cela fonctionnerait bien en particulier pour ceux qui utilisent Bootstrap, testé dans les dernières versions du navigateur:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } 
  

Vérifiez celui-ci C’est pirate, simple comme ça:

  • Définissez -prefix-appearance sur none pour supprimer les styles
  • Utilisez text-indent pour “pousser” le contenu un peu à droite
  • Enfin, définissez text-overflow sur une chaîne vide. Tout ce qui dépasse sa largeur deviendra … rien! Et cela inclut la flèche.

Maintenant, tu es libre de le styler comme tu veux 🙂

Voici mon exemple jsfiddle: http://jsfiddle.net/AEt5k/1/

Style de l’étiquette avec CSS et utiliser des événements de pointeur:

  

et le CSS relatif est

 label:after { content:'\25BC'; display:inline-block; color:#000; background-color:#fff; margin-left:-17px; /* remove the damn :after space */ pointer-events:none; /* let the click pass trough */ } 

Je viens d’utiliser une flèche vers le bas ici, mais vous pouvez définir un bloc avec une image d’arrière-plan. Voici un échantillon de violon laid: https://jsfiddle.net/1rofzz89/

Cela fonctionne dans tous les navigateurs:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ background-position-x: 244px; }