web-dev-qa-db-fra.com

Firefox 30 ne cache plus les flèches de sélection

J'ai toujours utilisé le "truc":

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

faire des boîtes de sélection personnalisées sur FF, mais depuis la version 30, cela a complètement cessé de fonctionner. J'ai essayé de trouver si c'était obsolète mais je n'ai rien trouvé. Existe-t-il une solution de contournement ou une autre méthode pour remplacer cela?

htmlcssfirefox
13
Jaypee

Mettre à jour

Depuis janvier 2015, cela fonctionne à nouveau avec la publication de Firefox 35. Voir la réponse ci-dessous pour une référence historique.

Contexte

Le hack qui a été utilisé est le suivant:

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

Lors de mes tests, sur 29 FF, -moz-appearance:none; n'a eu aucun effet. Ce qui a empêché la boîte de flèche d'apparaître, ce sont les deux secondes lignes. Il a dit que tout dépassement de capacité doit être remplacé par une chaîne vide, puis il a utilisé text-indent pour provoquer le dépassement de select. Étant donné que la boîte de flèche est rendue sous la forme d'un élément unique, similaire à une lettre, elle est remplacée par la chaîne vide.

Qu'est-il arrivé

Quelqu'un chez Mozilla a remarqué que si vous avez une marge dans une liste déroulante select, la flèche ne change pas de taille. Selon le rapport de bug , ce problème a maintenant été résolu:

enter image description here

Le problème est que cela a séparé la flèche des règles CSS normales. J'ai essayé padding, text-indent, margin, white-space, text-wrap et quelques autres, et je ne trouve rien qui puisse l'affecter. ailleurs dans le mondeInternet , malheureusement, les gens disent la même chose.

Et maintenant

  1. Nous avons quelques options. Vous pouvez utiliser une superposition combinée à pointer-events:none pour styler la liste déroulante comme vous le souhaitez: Tutorial

  2. Vous pouvez créer un menu déroulant complètement séparé pour remplacer select, à l'aide de Javascript: Tutorial _

Nous pouvons aussi regarder le demande sur Bugzilla de Firefox , et espérer qu'un jour ils créeront un moyen non-hacky de le faire. VEUILLEZ NOTER _: N'y allez pas et commencez à poster des commentaires sur le fait de vouloir. Cela est en partie attribuable au fait que les gens ont fait une passe décisive. Il peut être utile de voter pour la question .

Mise à jour septembre 2014

C'est maintenant activement travaillé pour Firefox. 2 patchs ont été soumis et attendent d'être revus depuis une semaine. Le scénario le plus probable est que cela passe à FF35 Aurora, et nous avons quelques semaines pour que cela soit examiné et approuvé avant la date limite (Firefox fonctionne sur un calendrier de publication de 6 semaines). Il pourrait également être retardé, et même théoriquement, il pourrait être "amélioré", c'est-à-dire corrigé dans les versions actuelles d'Aurora et Bêta, pour être publié plus tôt.

Mise à jour octobre 2014

C'est comment maintenant résolu officiellement ! Genre de. Un correctif permettant aux utilisateurs de masquer l'élément flèche déroulant a été validé et sera livré avec Firefox 35 en janvier 2015.

Cela permettra uniquement aux utilisateurs de masquer la flèche. Le nommer est un autre problème, qui a été scindé en un autre ticket de bogue qui sera considéré dans le futur.

Mise à jour janvier 2015

Ceci a maintenant été corrigé! Firefox 35 est sorti le 13 janvier et vous pouvez maintenant utiliser -moz-appearance:none pour supprimer la flèche.

26
Andy Mercer

Oui ! Est bon ! Thks

JS FIDDLE

.customSelect {
    font-size: inherit;
    margin: 0;
    padding: 0.5em;
    background-color: transparent;
    color: #393939;
    opacity:1;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0px;
    border:1px solid #B1B2B3;
    padding-right: 2.5em;
}
7
user3730166

Vous pouvez utiliser cette solution pour firefox en utilisant la pseudo classe du fournisseur: -moz-any () et les événements de pointeur uniquement pour mozilla et n’affectent pas les autres navigateurs, car les deux sont valides depuis la version 3.6.

voici un exemple jsbin http://jsbin.com/pozomu/4/edit

1
user3806477
.SelectBox select {
   background: transparent;
   width: 182px;
   padding-right: 29px;
   font-size: 100%;
   text-indent: 0.01px;
   text-overflow: "";
   border: none;
   height: 17.5px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.SelectBox {
   width: 154px;
   height: 15.8px;
   overflow: hidden;
   background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
   border-radius:2px;
   border: 1px solid #B90F22;
}

<div class="SelectBox">
   <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
   </select>
</div>

Cela semble fonctionner correctement dans tous les principaux navigateurs sauf IE. IE revient au menu déroulant par défaut, ce qui ne devrait pas poser trop de problème.

1
Tim Jongerius

La réponse fournie par Mozilla Firefox à ce problème est simplement inacceptable. Le navigateur est endommagé et n’est rien de plus qu’une plaie ouverte pour le code malveillant. Ils proposent le navigateur V29-30 comme mise à jour de sécurité, mais il a fallu plus d'une semaine depuis la date de publication pour qu'une notification apparaisse pour la version 30.

Ma propre réponse sera de ne rien faire et j'encourage tous les autres développeurs à faire de même. Finalement, les utilisateurs se lasseront des incohérences dans la conception et abandonneront Mozilla Firefox comme s'ils l'avaient été encore plus souvent.

Si une demande de support raisonnable est rencontrée avec mépris et que d'autres navigateurs peuvent le faire, mais que Mozilla Firefox ne le peut plus. Ce n’est pas moi qui dois réparer mon code, mais Mozilla Firefox doit réparer le leur!

1
user1557757

Une option consiste à encapsuler les éléments select dans des éléments de conteneur avec overflow: hidden. Augmentez la largeur des éléments select pour pousser la flèche vers le bas à droite et en dehors de l’image. Ajoutez ensuite une bordure aux éléments de conteneur correspondant aux éléments select.

.select-container {
    overflow: hidden;
    display: inline-block;
    height: 33px;
    border-right: 1px solid #B3B6BD;
}

.select-container select {
    width: 113%;
}

Le problème, c’est que cela affectera les styles définis sur focus ou les erreurs de validation, c’est pourquoi j’ai fini par faire ce que je voulais et en recouvrant les flèches de pseudo-éléments.

0
adrice727

J'ai résolu ce problème en donnant du style à div et à sélectionner individuellement.

Tout le monde peut modifier sa largeur et d’autres propriétés de style a/c en fonction des besoins. :)

Voici le violon js pour cela. JSFIDDLE testé sur tous les navigateurs.

select :: - ms-expand pour IE et -webkit-user-select: none pour chrome.

 <div  class="common-dropdown-small-div" style="width: 220px">
    <select id="select" class="common-dropdown-project-select">
        <option>
            Apple
        </option>
        <option>
            blackberry
        </option>
        <option>
           pumpkin
        </option>
    </select>
</div>
.common-dropdown-small-div{
  border: 1px solid rgb(208, 208, 208);
  border-radius: 5px !important;
  overflow: hidden; 
}

.common-dropdown-project-select{
  width: 100% !important;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
  background-position: 97% 60%, 0 0 ! important;
  background-repeat: no-repeat;
  background-size: 25px 16px;
  border: none  ! important;    
  outline : medium none !important;
  display: inline-flex !important;
  height: 33px !important;
  vertical-align: top;
  -webkit-appearance: none;
}

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

Bien que ce soit un bidouillage assez sale, vous pouvez résoudre ce problème en ajoutant un autre élément de superposition au-dessus de la flèche vers le bas dans le CSS de votre wrapper de sélection (dans mon cas .form-control-select):

/* The arrow */
.form-control-select:after {
    content: "\f078";
    z-index: 3;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 9px;
    padding: 6px 7px;
    font-size: 10px;
}

/* the white overlay to hide Firefox' arrow */    
.form-control-select:before {
    position: absolute;
    right: 1px;
    top: 2px;
    bottom: 1px;
    width: 20px;
    background: #fff;
    content: "";
    z-index: 2;
    border: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 1px;
    pointer-events: none; 
}

Mon HTML:

<div class="form-control-select">
  <select class="form-control">
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
</div>
0
totas