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

Vous ai demandé de trouver une solution pour IE8 et IE9.

Commençons avec IE8. Réponse courte: Il n'est pas possible. En raison de la façon IE8 et plus tôt rendu des listes de sélection, vous ne peut tout simplement pas cacher la flèche de la liste déroulante. Boîte de sélectionner les contrôles sont impossibles à coiffer dans le vieux IE, et toujours placée au-dessus de tout autre contenu.

Il n'est tout simplement pas une solution à cela, d'autres de réécrire l'ensemble de sélectionner la zone de contrôle en Javascript.

Maintenant IE9. Vous peut masquer la chute de la flèche. Ce n'est pas une chose standard, mais vous pouvez pirater.

Vous avez besoin pour commencer avec un wrapper élément (par exemple un <div>) autour de votre boîte de sélection. Vous pouvez ensuite le style de ce avec un :before sélecteur de rajouter un peu de contenu sur le dessus de la chute de la flèche, de manière efficace de le cacher.

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 pour le jsFiddle de le voir en action.

Remarque, j'ai utilisé red comme la superposition de couleur pour le rendre évident ce qui se passe. Clairement, en utilisation normale, vous voulez utiliser du blanc de sorte qu'il ne se distingue pas.

Vous noterez aussi que comme je l'ai dit ci-dessus, cela ne fonctionne pas avec IE8.

Évidemment, ce n'est pas la même que la "bonne" solution pour IE10 et les autres navigateurs, ce qui en fait supprimer la flèche; tout ce que nous faisons ici est de le cacher. Et cela signifie que nous nous retrouvons avec un ennuyeux tache blanche à la fin de la zone de sélection où la flèche est utilisé pour être.

Nous pouvons faire plus de style pour résoudre ce problème: par exemple, si nous faisons l'élément conteneur une largeur fixe et avec overflow:hidden, nous pouvons nous débarrasser de la tache blanche, mais ensuite, nous avons des problèmes avec les frontières de notre zone de sélection étant rompu, de sorte que nous avons à faire plus de style de bugs; il peut tout obtenir un peu désordonné. Plus bien sûr, cette option ne fonctionne que si la zone de sélection lui-même est connu de largeur fixe.

Donc là vous l'avez: Il y a des options pour le faire dans IE9. Ils ne sont pas assez bien, et franchement, il peut ne pas être en vaut la peine. Mais si vous êtes désespéré, vous pouvez le faire.

Oh, et n'oubliez pas de faire ce code CSS spécifique de sorte qu'il ne fonctionne que sur IE9, sinon il va provoquer des problèmes sur d'autres navigateurs.

La seule façon d'accomplir ceci dans les anciennes versions d'IE est d'envelopper le <select> dans un petit peu de conteneurs et de définir overflow: hidden; Ce serait cacher la flèche sur le côté droit, mais encore vous permettent d'ouvrir la liste déroulante en cliquant sur elle. C'est salissant, mais c'est la seule façon d'accomplir ce que vous voulez.

Dans le passé, ces éléments n'ont pas été styleable parce qu'ils étaient considérés comme une partie du système d'exploitation. Il semble que ce n'est plus un problème maintenant que la pseudo-éléments comme vous l'avez mentionné, sont disponibles.

Un autre mauvais, mais fonctionnellement solucion pour IE9 😀

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://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png');
    right:-2px;
    top:-1px;
    padding-left:2px;
    height:18px;
    width:15px;
    margin:2px;
    background:white;
    z-index:445;
    border: 0;
}

Tous vous avez besoin est d'encapsuler le code avec cette IE9 media query pirater

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

    }
/* IE9 */

jsFiddle