web-dev-qa-db-fra.com

Supprimer la flèche de sélection sur IE

J'ai select element, je veux enlever la flèche, alors 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 Violon sur IE9 . tout ce dont j'ai besoin est d'enlever la flèche dans ie9 S'il vous plaît, répondez JSFIDDLE.

htmlcsscss3html-select
119
Muath

Dans IE9, il est possible avec purement un hack comme conseillé par @Spudley. Puisque vous avez personnalisé la hauteur et la largeur de la division et de la sélection, vous devez modifier _div:before_ css pour correspondre à la vôtre.

Dans le cas où c’est IE10, l’utilisation ci-dessous de css3 est possible

_select::-ms-expand {
    display: none;
}
_

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

303
Praveen

Je suggérerais la solution que vous pouvez trouver dans ce dépôt GitHub . Ceci fonctionne également pour IE8 et IE9 avec une flèche personnalisée provenant d'une police de caractères.

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

Quoi qu'il en soit, commençons par les navigateurs modernes, puis 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 la liste déroulante afin d’avoir la même flèche.

Pour ce faire, vous devez réinitialiser le style par défaut du navigateur pour la balise select 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 règles appearance sont définies sur none pour réinitialiser les règles par défaut des navigateurs. Si vous souhaitez avoir le même aspect pour chaque flèche, vous devez les conserver.

Les règles background dans les exemples sont définies avec des images SVG en ligne représentant différentes flèches. Ils sont positionnés à 98% de la gauche pour laisser une marge au bord droit (vous pouvez facilement modifier la position à votre guise).

Afin de conserver le comportement correct entre les navigateurs, la seule règle à laisser en place est la règle 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) à l'aide de Icon Font

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 de ces navigateurs (comme le select::-ms-expand pour IE10 +). La solution consiste à masquer la partie de la liste déroulante qui contient la flèche par défaut et insérer un police de flèche (ou un SVG, si vous préférez) similaire au SVG utilisé dans les autres navigateurs (voir la règle select CSS pour plus de détails sur le SVG intégré utilisé).

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

Après cela, chaque select du code HTML doit être enveloppé par un div (ou toute autre balise pouvant encapsuler un élément). À cet emballage, ajoutez simplement la classe contenant 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 balise select.

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

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

La police-flèche personnalisée est placée dans la pseudo-classe :before où la règle content contient la référence de la flèche (il s'agit dans ce cas d'une parenthèse droite).

Nous plaçons également cette flèche dans une position absolue pour la centrer autant que possible (si vous utilisez des polices d’icônes différentes, pensez à les ajuster à l’opportunité en modifiant les valeurs du haut, de 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 substituer la flèche d’arrière-plan ou la flèche de police d’icône, chacune de vos choix étant simplement modifiée dans la règle background-image ou en créant vous-même un nouveau fichier de police d’icône.

4
Ferie

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;
}
4
Tejasvi Hegde