Comment masquer la flèche déroulante dans IE8 et IE9?

J’ai utilisé le CSS ci-dessous pour masquer la flèche déroulante dans FF, Safari, Chrome et ajouté ma propre image à personnaliser.

select { -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } 

Pour IE10, j’ai utilisé le pseudo-élément

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

Je ne sais pas comment appliquer la même chose à IE9 et IE8. Quelqu’un peut-il me dire comment masquer la flèche déroulante dans IE8 et IE9.

Vous avez demandé une solution pour IE8 et IE9.

Commençons avec IE8. Réponse courte: Ce n’est pas possible. En raison de la façon dont IE8 et les versions antérieures effectuent des sélections de boîtes, vous ne pouvez simplement pas masquer la flèche déroulante. Les contrôles de boîte de sélection sont impossibles à styliser dans l’ancien IE et apparaissent toujours au-dessus de tout autre contenu.

Il n’y a tout simplement pas de solution à cela, si ce n’est la réécriture de l’intégralité du contrôle de boîte de sélection en Javascript.

Maintenant IE9. Vous pouvez masquer la flèche déroulante. Ce n’est pas une chose standard, mais vous pouvez le pirater.

Vous devez commencer par un élément wrapper (par exemple, un

) autour de votre boîte de sélection. Vous pouvez ensuite le styliser avec un sélecteur :before pour placer un bit de contenu supplémentaire sur le haut de la flèche, le masquant efficacement.

Voici le CSS:

 div { position:relative; display:inline-block; z-index:0 } div select { z-index:1; } div:before { display:block; position:absolute; content:''; right:0px; top:0px; height:1em; width:1em; margin:2px; background:red; z-index:5; } 

… et voir ici le jsFiddle pour le voir en action.

Notez que j’ai utilisé le red comme couleur de recouvrement pour rendre évident ce qui se passe. Clairement, en utilisation normale, vous voudriez utiliser du blanc pour ne pas vous démarquer.

Vous noterez également que, comme je l’ai indiqué ci-dessus, cela ne fonctionne pas dans IE8.

Evidemment, ce n’est pas la même chose que la solution “appropriée” pour IE10 et les autres navigateurs, qui suppriment réellement la flèche; Tout ce que nous faisons ici est de le cacher. Et cela signifie que nous nous retrouvons avec un patch blanc agaçant à la fin de la boîte de sélection où se trouvait la flèche.

Nous pouvons faire plus de styling pour résoudre ce problème: par exemple, si l’élément conteneur a une largeur fixe et un overflow:hidden , nous pouvons nous débarrasser du patch blanc, mais nous avons des problèmes avec les bordures de notre boîte de sélection. nous devons faire d’autres corrections de style; tout peut devenir un peu compliqué. De plus, cette option ne fonctionne que si la zone de sélection est une largeur fixe connue.

Donc là vous l’avez: Il y a des options pour le faire dans IE9. Ils ne sont pas beaux, et franchement, cela ne vaut pas la peine. Mais si vous êtes désespéré, vous pouvez le faire.

Oh, et n’oubliez pas de rendre ce code CSS spécifique afin qu’il ne fonctionne que sur IE9, sinon cela entraînera des problèmes sur les autres navigateurs.

Vous ne pouvez pas supprimer la flèche en CSS pur pour IE9 < C’est pourquoi ils ont fait ::-ms-expand pour IE10.

Vous pourriez cependant faire quelque chose comme ça. jsfiddle ici

Dans cet exemple, vous définissez une width fixe lors de la select et vous enroulez un div avec une width et un overflow:hidden inférieurs overflow:hidden afin de masquer / masquer la liste déroulante. Il a un support complet. Cela cache essentiellement la flèche dans tous les navigateurs.

CSS

 div { width: 80px; overflow: hidden; border: 1px solid black; } select { width: 100px; border: 0px; } 

La seule façon d’accomplir cela dans les anciennes versions d’IE consiste à envelopper le dans un conteneur légèrement plus petit et à définir le overflow: hidden; Cela masquerait la flèche sur le côté droit mais vous permettrait toujours d’ouvrir la liste déroulante en cliquant dessus. C’est désordonné mais c’est le seul moyen d’accomplir ce que vous voulez.

Dans le passé, ces éléments n’étaient pas stylables car ils étaient considérés comme faisant partie du système d’exploitation. Il semble que cela devienne moins un problème maintenant que les pseudo-éléments tels que vous l’avez mentionné sont disponibles.

pas sûr de chaque cas d’utilisation, mais dans mon cas avec une largeur fixe x hauteur bg pic configurée pour le parent, cela fonctionnait aussi pour IE et FF:

HTML

 

CSS

 #parent{ ... overflow: hidden; width:100px; // for example } #parent select{ ... width:120px; } 

jsfiddle

Une autre mauvaise idée mais fonctionnellement pour IE9: D

Aperçu

// CSS

 div { position:relative; display:inline-block; border:solid black 1px; z-index:0 } div select { z-index:1; border:none; width:200px; } div:before { display:block; position:absolute; content:url('http://soffr.miximages.com/drop-down-menu/arrow.png'); right:-2px; top:-1px; padding-left:2px; height:18px; width:15px; margin:2px; background:white; z-index:445; border: 0; } 

Tout ce dont vous avez besoin est d’encapsuler ce code avec ce hack de requête de média IE9

 /* IE9 */ @media screen and (min-width:0\0) { } /* IE9 */ 

jsfiddle