Firefox 30 ne cache plus les flèches de la boîte
J'ai toujours utilisé le "truc":
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
faire personnalisé, sélectionnez les cases sur FF, mais depuis la version 30 est sorti cette cessé de fonctionner complètement. J'ai essayé de trouver si c'était déconseillé, mais ne pouvait pas trouver quoi que ce soit. Est-il une solution, ou une autre méthode pour la remplacer?
source d'informationauteur Jaypee
Vous devez vous connecter pour publier un commentaire.
Mise à jour
À compter de janvier 2015, il travaille à nouveau avec la sortie de Firefox 35. Voir la réponse ci-dessous pour référence historique.
Fond
Le hack qui a été utilisé est: est-ce
Dans mes tests, sur FF 29,
-moz-appearance:none;
avait aucun effet. Ce qui a causé la flèche de la boîte pour ne pas apparaître a la seconde deux lignes. Elle a déclaré que tout dépassement doit être remplacé par une chaîne vide, et puis il utilisé text-indent pour provoquer laselect
à débordement. Depuis la flèche de la boîte est rendu sous la forme d'un élément unique, semblable à une seule lettre, il sera remplacé par une chaîne vide.Ce Qui S'Est Passé
Quelqu'un de chez Mozilla remarqué que si vous avez un rembourrage sur un menu déroulant
select
la flèche ne change pas de taille. Selon le rapport de bugce problème a été corrigé:Le problème est qu'il a divorcé de la flèche normale des règles CSS. J'ai essayé
padding
text-indent
margin
white-space
text-wrap
et un peu plus, et je ne peux pas trouver quelque chose qui va l'affecter. d'Ailleurs autour de la internetles gens disent la même chose, malheureusement.Quoi Maintenant
Nous avons quelques options. Vous pouvez utiliser une superposition combiné avec
pointer-events:none
de style de la liste déroulante où vous le souhaitez: TutorielVous pouvez créer un tout autre menu déroulant permettant de remplacer
select
à l'aide de Javascript: TutorielNous pouvons aussi regarder la demande sur Firefox Bugzillaet espère qu'un jour ils vont créer un non-hacky façon de le faire. VEUILLEZ NOTER: Ne pas y aller et de commencer à poster des commentaires à propos de le vouloir. Partie de la raison pour laquelle il est tellement en retard, c'est que les gens jetaient un ajustement. Il peut aider à voter pour la question.
Mise À Jour Sept. 2014
C'est maintenant activement travaillé sur pour Firefox. 2 patchs ont été soumis et ont été en attente d'examen pour une semaine. Plus probablement scénario est que, de ce fait, il en FF35 Aurora, et nous avons quelques semaines pour qu'elle s'examiné et approuvé avant la date butoir (Firefox fonctionne sur un 6 semaine calendrier de sortie). Il pourrait également être retardée, et il pourrait même théoriquement être "embarqué", ce qui signifie patché dans le courant de l'Aurore et des versions Beta, pour obtenir libéré plus tôt.
Mise À Jour Oct. 2014
Cette façon maintenant officiellement résolu! Genre de. Un patch pour permettre aux utilisateurs de masquer la flèche de menu déroulant élément a été commise, et sera livré avec Firefox 35 en janvier 2015.
Cela permet uniquement aux utilisateurs de cacher la flèche. Pour faire style que c'est un autre problème, qui a été essaimé dans un autre bug billet qui seront considérés dans l'avenir.
Mise À Jour Jan. 2015
Cela a été corrigé! Firefox 35 est sorti le 13 janvier, et vous pouvez maintenant utiliser
-moz-appearance:none
pour supprimer la flèche.Oui ! C'est bon ! Thks
JS FIDDLE
Cela semble bien fonctionner dans tous les principaux navigateurs, mais IE. C'est à dire est de revenir à la valeur par défaut déroulante de sorte que ne devrait pas être trop un problème.
La réponse de fournir par Mozilla Firefox à cette question est tout simplement inacceptable. Le navigateur est cassé et n'est rien de plus qu'une plaie ouverte pour les codes malveillants. Ils favorisent la V29-30 navigateur qu'une mise à jour de sécurité, mais il a fallu plus d'une semaine depuis la date de sortie pour une notification apparaît pour V30.
Ma réponse va être de ne rien faire, et j'encourage tous les autres développeurs à faire de même. Finalement, les utilisateurs seront fatigués de la conception des incohérences et d'abandonner Mozilla Firefox comme ils l'ont été de plus en plus nombreuses.
Si raisonnables à l'appui de la demande est de répondre avec une pure mépris et d'autres navigateurs peuvent le faire, mais Mozilla Firefox n'est plus possible. Ce n'est pas moi qui a à corriger mon code, mais Mozilla Firefox a fixer leur!
Vous pouvez utiliser cette solution pour firefox, en utilisant le fournisseur de pseudo-classe :-moz-tout() et les événements de pointeur seulement pour mozilla et n'affectent pas les autres navigateurs, parce que les deux est valable que depuis la version 3.6.
voici un exemple jsbin
http://jsbin.com/pozomu/4/edit
Bien que c'est un très sale hack, vous pouvez résoudre ce problème en ajoutant un autre élément de superposition-dessus de la flèche vers le bas dans le CSS de votre sélectionnez wrapper (dans mon cas .formulaire de contrôle de la sélection):
Mon code HTML:
Je fixe mon ce problème en donnant un peu de style à div et sélectionnez individuellement.
N'importe qui peut modifier sa largeur et d'autres propriétés de style d'un/c des besoins. 🙂
Voici le js fiddle. JSFIDDLE
testé sur tous les navigateurs.
sélectionnez::-ms-développez pour IE et -webkit-user-select: none pour chrome.
Une option consiste à envelopper le
select
éléments dans un conteneur éléments avecoverflow: hidden
. Augmenter la largeur de laselect
éléments pour pousser la flèche en bas à droite et hors de l'image. Puis ajouter une bordure à l'contenant des éléments qui correspond à laselect
éléments.Le problème est que cela aura une incidence sur les styles de jeu sur
focus
ou des erreurs de validation, c'est pourquoi j'ai fini par faire ce que totas suggéré et couvrant les flèches avec des pseudo-éléments.