Supprimer la flèche de sélection sur IE

J'ai un élément sélectionné, je veux supprimer la flèche, puis je peux ajouter une autre icône .. Je peux le faire pour Firefox Safari et Chrome, mais cela n'a pas fonctionné sur IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

VOIR Fiddle sur IE9 . tout ce dont j'ai besoin est de supprimer la flèche dans ie9 S'il vous plaît réponse JSFIDDLE.

Dans IE9, c'est possible avec un simple hack comme conseillé par @Spudley. Puisque vous avez personnalisé la hauteur et la largeur du div et sélectionnez, vous devez modifier le div:beforeCSS pour qu'il corresponde au vôtre.

Si c'est IE10, il est possible d'utiliser ci-dessous css3

select::-ms-expand {
    display: none;
}

Cependant, si vous êtes intéressé par le plugin jQuery, essayez Chosen.jsou vous pouvez créer le vôtre dans js.

Je suggérerais ma solution que vous pouvez trouver dans ce dépôt GitHub . Cela fonctionne également pour IE8 et IE9 avec une flèche personnalisée provenant d'une police d'icônes.

Exemples de liste déroulante de navigateurs croisés personnalisée en action: vérifiez-les avec tous vos navigateurs pour voir la fonctionnalité de navigateurs croisés.

Quoi qu'il en soit, commençons par les navigateurs modernes et ensuite nous verrons la solution pour les plus anciens.

Flèche déroulante pour Chrome, Firefox, Opera, Internet Explorer 10+

Pour ces navigateurs, il est facile de définir la même image d'arrière-plan pour le menu déroulant afin d'avoir la même flèche.

Pour ce faire, vous devez réinitialiser le style par défaut du navigateur pour la selectbalise et définir de nouvelles règles d'arrière-plan (comme suggéré précédemment).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

Les appearancerègles sont définies sur aucune pour réinitialiser celles par défaut des navigateurs, si vous souhaitez avoir le même aspect pour chaque flèche, vous devez les garder en place.

Les backgroundrègles dans les exemples sont définies avec des images en ligne SVG qui représentent différentes flèches. Ils sont positionnés à 98% de la gauche pour garder une certaine marge sur la bordure droite (vous pouvez facilement modifier la position comme vous le souhaitez).

Afin de maintenir le bon comportement entre les navigateurs, la seule autre règle qui doit être laissée en place est le outline. Cette règle réinitialise la bordure par défaut qui apparaît (dans certains navigateurs) lorsque l'utilisateur clique sur l'élément. Toutes les autres règles peuvent être facilement modifiées si nécessaire.

Flèche déroulante pour Internet Explorer 8 (IE8) et Internet Explorer 9 (IE9) utilisant la police d'icône

C'est la partie la plus difficile ... Ou peut-être pas.

Il n'y a pas de règle standard pour masquer les flèches par défaut pour ces navigateurs (comme select::-ms-expandpour IE10 +). La solution est de masquer la partie de la liste déroulante qui contient la flèche par défaut et d'insérer une police d'icône de flèche (ou un SVG, si vous préférez) similaire au SVG qui est utilisé dans les autres navigateurs (voir la selectrègle CSS pour plus détails sur le SVG en ligne utilisé).

La toute première étape consiste à définir une classe capable de reconnaître le navigateur: c'est la raison pour laquelle j'ai utilisé les IF IE conditionnelles au début du code. Ces IF sont utilisés pour attacher des classes spécifiques à la htmlbalise afin de reconnaître l'ancien navigateur IE.

Après cela, tout selectle HTML doit être enveloppé par une div(ou toute autre balise qui peut envelopper un élément). Dans ce wrapper, ajoutez simplement la classe qui contient la police de l'icône.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

En termes simples, ce wrapper est utilisé pour simuler la selectbalise.

Pour agir comme une liste déroulante, le wrapper doit avoir une bordure, car nous masquons celle qui provient du select.

Notez que nous ne pouvons pas utiliser la selectbordure car nous devons masquer la flèche par défaut en l'allongeant 25% de plus que le wrapper. Par conséquent sa bordure droite ne doit pas être visible car nous masquons ces 25% de plus par la overflow: hiddenrègle appliquée à selectlui - même.

La police-icône de flèche personnalisée est placée dans la pseudo-classe :beforeoù la règle contentcontient la référence de la flèche (dans ce cas, il s'agit d'une parenthèse droite).

Nous plaçons également cette flèche en position absolue pour la centrer autant que possible (si vous utilisez différentes polices d'icônes, pensez à les ajuster opportunément en changeant les valeurs en haut et à gauche et la taille de la police).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Vous pouvez facilement créer et remplacer la flèche d'arrière-plan ou la flèche de police d'icône, avec chacune de celles que vous souhaitez simplement en la modifiant dans la background-imagerègle ou en créant vous-même un nouveau fichier de police d'icône.

Si vous souhaitez utiliser la classe et la pseudo-classe:

.simple-control est votre classe css

:disabled est une pseudo classe

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}