web-dev-qa-db-fra.com

Comment masquer les flèches déroulantes dans IE8 et IE9?

J'ai utilisé le CSS ci-dessous pour masquer la flèche déroulante dans FF, safari, chrome) et j'ai 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 pour IE9 et IE8. Quelqu'un peut-il me dire comment cacher la flèche déroulante dans IE8 et IE9.

htmlcssinternet-explorerdrop-down-menu
44
Royal

Vous avez demandé une solution pour IE8 et IE9.

Commençons par IE8. Réponse courte: Ce n'est pas possible. En raison de la manière dont IE8 et les versions précédentes rendent les zones de sélection, vous ne pouvez tout simplement pas masquer la flèche déroulante. Les contrôles de zone de sélection sont impossibles à styliser dans l'ancien IE et apparaissent toujours au-dessus de tout autre contenu.

Il n’ya tout simplement aucune solution à ce problème, mis à part la réécriture complète du contrôle de la zone de sélection en Javascript.

Maintenant IE9. Vous pouvez masquer la flèche vers le bas. Ce n'est pas une chose standard, mais vous pouvez le pirater.

Vous devez commencer par un élément wrapper (par exemple, un <div>) autour de votre case à cocher. Vous pouvez ensuite appeler ceci avec un :before sélecteur pour placer un peu plus de contenu au-dessus 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 pour que le jsFiddle le voie en action.

Notez que j'ai utilisé red comme couleur de surimpression pour rendre évident ce qui se passe. Clairement, en utilisation normale, vous voudriez utiliser du blanc pour qu'il ne ressorte pas.

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

De toute évidence, ce n'est pas la même chose que la "bonne" solution pour IE10 et les autres navigateurs, qui suppriment la flèche; tout ce que nous faisons ici c'est le cacher. Et cela signifie que nous nous retrouvons avec une tache blanche agaçante à la fin de la zone de sélection où se trouvait la flèche.

Nous pouvons faire plus ample style pour résoudre ceci: par exemple si nous donnons à l'élément conteneur une largeur fixe et avec overflow:hidden, nous pouvons nous débarrasser de la zone blanche, mais nous avons ensuite des problèmes avec les bordures de notre boîte de sélection brisées; tout peut devenir un peu brouillon. De plus, cette option ne fonctionne que si la zone de sélection est une largeur fixe connue.

Donc, voilà: il existe des options pour le faire dans IE9. Ils ne sont pas jolis cependant, et franchement, ils ne valent peut-être 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.

39
Spudley

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

Vous pouvez cependant faire quelque chose comme ça. jsFiddle ici

Dans cet exemple, vous définissez une valeur fixe width sur select et vous encapsulez une div avec une valeur inférieure width et overflow:hidden afin de masquer/masquer la liste déroulante. Il a un soutien complet. Ceci fait masquer la flèche dans tous les navigateurs.

[~ # ~] css [~ # ~] 

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

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

[~ # ~] html [~ # ~] 

<div id="parent">
  <select>
    ...
  </select>
</div>

[~ # ~] css [~ # ~] 

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

#parent select{
  ...
  width:120px;
}

jsfiddle

2
Tamás Matyó

Le seul moyen d’y parvenir dans les anciennes versions de IE est d’envelopper le <select> dans un récipient légèrement plus petit et mettre overflow: hidden; Ceci masquerait la flèche à droite mais vous permettrait quand même d’ouvrir le menu déroulant 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 modifiables car ils étaient considérés comme faisant partie du système d'exploitation. Il semble que cela devienne moins problématique maintenant que les pseudo-éléments que vous avez mentionnés sont disponibles.

2
nullability

Un autre mauvais mais fonctionnellement solution pour IE9: D

Aperç

// 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;
}

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

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

    }
/* IE9 */

jsFiddle

1
Alberto