172 votes

Comment supprimer la flèche d'une balise <select> dans Firefox

Salut à tous, j'essaie de styliser une <select> en utilisant CSS3 (je sais, les styles personnalisés pour les éléments de formulaire sont une mauvaise idée en général). J'obtiens les résultats que je souhaite dans Webkit (Chrome / Safari), mais Firefox ne joue pas le jeu (je ne m'embête même pas avec IE). J'utilise la méthode CSS3 appearance mais pour une raison quelconque, je n'arrive pas à faire disparaître l'icône de la liste déroulante de Firefox.

Voici un exemple de ce que je fais : http://jsbin.com/aniyu4/2/edit

#dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}

Comme vous pouvez le voir, je ne cherche pas à faire quelque chose d'extraordinaire. Je veux juste supprimer les styles par défaut et ajouter ma propre flèche déroulante. Comme je l'ai dit, c'est génial dans Webkit, mais pas dans Firefox. Apparemment, le -moz-appearance: none ne supprime pas l'élément de la liste déroulante.

Des idées ? Et, non, le javascript n'est pas une option. Je ne veux pas exécuter javascript pour quelque chose d'aussi stupide.

165voto

João Cunha Points 2741

Mise à jour : cette astuce arrêté fonctionne à partir de FF 30. Aucun autre correctif jusqu'à présent. Gardez les yeux sur le Liste complète pour les mises à jour.


Je viens de comprendre comment supprimer la flèche de sélection de Firefox . L'astuce consiste à utiliser un mélange de -prefix-appearance , text-indent et text-overflow . Il s'agit d'un pur CSS qui ne nécessite aucun balisage supplémentaire.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Testé sur Windows 8, Ubuntu et Mac, avec les dernières versions de Firefox.

Exemple concret : http://jsfiddle.net/joaocunha/RUEbp/1/

Plus d'informations sur le sujet : https://gist.github.com/joaocunha/6273016

78voto

Jordan Young Points 554

Bon, je sais que cette question est ancienne, mais deux ans après, Mozilla n'a rien fait.

J'ai trouvé une solution simple.

Cela supprime essentiellement tout le formatage de la boîte de sélection dans Firefox et enroule un élément span autour de la boîte de sélection avec votre style personnalisé, mais ne devrait s'appliquer qu'à Firefox.

Disons que c'est votre menu de sélection :

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

Et supposons que la classe css 'css-select' est.. :

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

Dans Firefox, le menu de sélection s'afficherait, suivi de l'affreuse flèche de sélection de Firefox, puis de votre jolie flèche personnalisée. Ce n'est pas idéal.

Maintenant, pour que cela fonctionne dans Firefox, ajoutez un élément span avec la classe 'css-select-moz' :

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Corrigez ensuite le CSS pour masquer la flèche sale de Mozilla avec -moz-appearance:window et placez la flèche personnalisée dans la classe 'css-select-moz' du span, mais faites en sorte qu'elle ne s'affiche que sur Mozilla, comme ceci :

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Plutôt cool pour être tombé sur ce bug il y a seulement 3 heures (je suis nouveau dans le webdesign et complètement autodidacte). Cependant, cette communauté m'a indirectement apporté tellement d'aide que j'ai pensé qu'il était temps de donner quelque chose en retour.

Je ne l'ai testé que dans firefox (mac) version 18, puis 22 (après avoir fait la mise à jour).

Tous les commentaires sont les bienvenus.

59voto

opengrid Points 1188

L'astuce qui fonctionne pour moi est de de faire en sorte que la largeur de la sélection soit supérieure à 100 % et d'appliquer la règle overflow:hidden.

select {
    overflow:hidden;
    width: 120%;
}

C'est le seul moyen pour l'instant de masquer la flèche de la liste déroulante dans FF.

Par ailleurs, si vous voulez de belles listes déroulantes, utilisez http://harvesthq.github.com/chosen/

20voto

Shaun Points 291

Nous avons trouvé une façon simple et décente de le faire. Elle est multi-navigateurs, dégradable, et ne casse pas un formulaire. Tout d'abord, réglez l'opacité de la boîte de sélection sur 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

c'est pour que vous puissiez toujours cliquer dessus

Créez ensuite une division ayant les mêmes dimensions que la boîte de sélection. La div doit être placée sous la boîte de sélection comme arrière-plan. Utilisez { position : absolute } et z-index pour y parvenir.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Mettez à jour l'innerHTML du div avec javascript. C'est très simple avec jQuery :

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

Voilà, c'est fait ! Il suffit de donner un style à votre div au lieu de la boîte de sélection. Je n'ai pas testé le code ci-dessus, donc vous devrez probablement le modifier. Mais j'espère que vous avez compris l'essentiel.

Je pense que cette solution est meilleure que {-webkit-appearance : none;}. Ce que les navigateurs devraient faire tout au plus, c'est dicter l'interaction avec les éléments de formulaire, mais certainement pas la façon dont ils sont affichés initialement sur la page, car cela rompt la conception du site.

14voto

ninja_corp Points 301

Essayez de cette façon :

-webkit-appearance: button;
-moz-appearance: button;

Ensuite, vous pouvez utiliser une autre image comme arrière-plan et la placer :

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

Il existe un autre moyen pour les navigateurs Moz :

text-indent:10px;

Si vous avez défini une largeur pour votre sélection, cette propriété poussera le bouton de la boîte de dépôt par défaut sous la zone de sélection.

Cela fonctionne pour moi ! ;)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X