web-dev-qa-db-fra.com

Suppression de la flèche d'élément de sélection IE10

Donc, avec Mozilla et WebKit, j'ai une solution à peu près correcte qui remplace la flèche sur la case select en utilisant appearance: none; et ayant un élément parent.

Dans IE, la plupart du temps, j'ai désactivé cette fonctionnalité. Pour IE10, je ne peux pas le désactiver car mes commentaires conditionnels ne fonctionnent pas.

Voici mon balisage:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

La classe ie10plus ne fait pas son chemin vers le balisage.

Je pense aussi qu'il pourrait exister un moyen légitime de remplacer la flèche dans IE. Je ne suis pas opposé à résoudre réellement le problème. appearance: none; cependant ne fonctionne pas. Alors, que puis-je faire ici?

css3internet-explorer-10conditional-statements
74
Parris

Évitez les commentaires conditionnels (qui ne sont pas pris en charge à partir d'Internet Explorer 10) avec le sniff de navigateur, mais adoptez plutôt une approche plus standard. Avec ce problème particulier, vous devriez cibler le ::-ms-expand pseudo-élément:

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

Mais !, Si nous voulons ajouter de la largeur, nous ne pouvons pas le faire de la manière suivante:

display:none

Alors

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}
2
Sergey

Internet Explorer 10 ne prend pas en charge les commentaires conditionnels , vous devrez donc faire autre chose. Une solution consiste à détecter l'agent utilisateur avec JavaScript et à ajouter la classe vous-même:

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

Vous devriez probablement ajouter ceci dans le <head> afin que vous n'ayez pas un flash de contenu non-stylé, mais cela pourrait ne pas être un problème.

De plus, si vous utilisez jQuery, vous voudrez peut-être faire quelque chose comme ceci:

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

Si vous souhaitez rechercher IE10 ou une version ultérieure, copiez-collez la fonction getInternetExplorerVersionà partir de cette page Microsoft , puis modifiez le paramètre if à quelque chose comme ça:

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}
1
Evan Hahn

J'ai eu un problème avec une flèche déroulante cachée sur le site sur IE 10 et 11 que je travaille qui utilise Zurb Foundation. Il y avait une ligne sur le _form .scss qui avait

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

Je l'ai supprimé et la flèche de la liste déroulante a commencé à s'afficher normalement sur tous les auteurs. Merci Jonathan pour votre réponse ici. Cela m'a aidé après avoir beaucoup cherché une solution.

0
ranjeesh