Comment supprimer la flèche d'un élément de sélection dans Firefox

172

J'essaie de styliser un selectélément en utilisant CSS3. J'obtiens les résultats que je souhaite dans WebKit (Chrome / Safari), mais Firefox ne joue pas bien (je ne suis même pas dérangé par IE). J'utilise la appearancepropriété CSS3 , mais pour une raison quelconque, je ne peux pas secouer l'icône déroulante de Firefox.

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

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Comme vous pouvez le voir, je n'essaye rien d'extraordinaire. Je veux simplement supprimer les styles par défaut et ajouter ma propre flèche déroulante. Comme je l'ai dit, super dans WebKit, pas génial dans Firefox. Apparemment, le -moz-appearance: nonene supprime pas l'élément déroulant.

Des idées? Non, JavaScript n'est pas une option

RussellUresti
la source
3
Il y a un rapport de bogue à ce sujet maintenant: bugzilla.mozilla.org/show_bug.cgi?id=649849
sneilan
3
Chosen est une bibliothèque JavaScript qui stylise vos sélections pour vous et leur donne un aspect vraiment sophistiqué. Cela pourrait valoir la peine d'être examiné, même si cela ne résoudra probablement pas votre problème.
stephenmurdoch
Vous trouverez peut-être ce billet de blog utile: red-team-design.com/making-html-dropdowns-not-suck
Rui Marques
1
On dirait qu'ils ont ajouté la -moz-appearancepropriété CSS3, j'utilise -moz-appearance: none;et cela semble fonctionner dans la version 35.0.1.
Tony M
Une solution simple serait de rendre l'élément de sélection plus large que le conteneur. Et enveloppez un préfixe d'url mozilla pour que les options ne soient plus larges que dans Firefox. @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
Luke Femur

Réponses:

78

D'accord, je sais que cette question est vieille, mais 2 ans plus tard et Mozilla n'ont rien fait.

J'ai trouvé une solution de contournement simple.

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

Dites 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, cela s'afficherait avec le menu de sélection, suivi de la vilaine flèche de sélection de Firefox, suivie de votre belle apparence personnalisée. Pas idéal.

Maintenant, pour que cela se passe 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>

Ensuite, corrigez le CSS pour masquer la flèche sale de mozilla avec -moz-apparence: window et lancez la flèche personnalisée dans la classe de span 'css-select-moz', mais ne l'affichez 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 de ne tomber que sur ce bug il y a 3 heures (je suis nouveau dans le webdesign et complètement autodidacte). Cependant, cette communauté m'a indirectement fourni tellement d'aide, j'ai pensé qu'il était temps que je donne quelque chose en retour.

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

Tous les commentaires sont les bienvenus.

Jordan Young
la source
2
Et après 2 ans, c'est la meilleure réponse qui a été publiée pour atteindre le résultat souhaité. J'ai mis un JSBin du code ici: jsbin.com/aniyu4/2440/edit pour que les autres le voient, et n'ai fait qu'une mise à jour CSS mineure. L'envergure était plus large que la sélection dans FF, en raison du bon rembourrage - cela signifiait que cliquer sur la flèche n'activait pas la liste déroulante. Pour régler cela, j'ai mis une marge droite négative sur l'élément de sélection pour ramener la largeur de la travée, pour chevaucher la largeur de la sélection.
RussellUresti
Oh bien sûr! Merci beaucoup, Russell. Vraiment heureux que cela ait aidé.
Jordan Young
5
Cela n'a pas fonctionné pour moi sur FF 23-24 sous Windows (j'ai essayé le jsbin dans le commentaire). J'ai fini par utiliser cette solution de contournement stackoverflow.com/questions/6787667/…
Esteban
4
Cela ne fonctionne plus sur FF 30. Veuillez continuer et soumettre un ticket sur le site Web de Mozilla: bugzilla.mozilla.org/show_bug.cgi?id=649849 . Plus les gens s'en plaignent, meilleures sont les chances qu'ils le réparent.
Stan le
1
Fonctionne uniquement sur FF 31 sur Mac.
Erwin Wessels
165

Mise à jour: cela a été corrigé dans Firefox v35. Voir l' essentiel pour plus de détails.


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-indentet text-overflow. C'est du CSS pur et ne nécessite aucun balisage supplémentaire.

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

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

Exemple en direct: http://jsfiddle.net/joaocunha/RUEbp/1/

En savoir plus sur le sujet: https://gist.github.com/joaocunha/6273016

João Cunha
la source
1
J'ai une place spéciale dans mon cœur généralement froid pour les correctifs hacky comme celui-ci. C'est plutôt génial. Le seul inconvénient est que FF laisse un espace à la fin de la zone de texte déroulante (entre le texte réel et la fin de la zone de sélection), ce qui crée un espacement incohérent entre FF et les autres navigateurs, mais ce n'est qu'un petit problème. Belle trouvaille.
RussellUresti
Belle prise, @RussellUresti. Mais étant donné que l'idée générale pourrait être de fournir une flèche modifiée, l'espace se révèle en fait utile. J'ai joué un peu avec, et en ajoutant padding-right:10px;à la <select>volonté "pousser" la flèche désormais invisible vers la gauche. Bottomline: Firefox MASQUE la flèche, Chrome la SUPPRIME. Mettra à jour mes écrits en conséquence, merci pour cela.
João Cunha
J'ai ajouté un peu de crossbrowser (je n'ai pas testé dans les anciennes versions d'IE) comme réponse afin que vous puissiez mettre à jour le vôtre
Daniël Tulp
2
La meilleure solution pour moi, car -moz-appearence: windowne fonctionne pas avec des arrière-plans transparents (dessinez un bg laid sur place, au moins sur Firefox Linux)
kik
Parce que cela supprime complètement la flèche, le <select> résultant ressemble à une zone de texte et il est plutôt moche. Vous pouvez donc ajouter une image d'arrière-plan pour la faire ressembler à une liste déroulante: codepen.io/anon/pen/nvfCq
thom_nic
59

L'astuce qui fonctionne pour moi est de rendre la largeur de sélection supérieure à 100% et d'appliquer le débordement: hidden

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

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

BTW. si vous voulez de beaux menus déroulants, utilisez http://harvesthq.github.com/chosen/

opengrid
la source
6
Cela n'a aucun effet pour moi. FF 6.0.2
Charlie Schliesser
1
Bonne solution pour IE également. Dans ma solution, j'ai défini l'élément div contenant sur overflow: hidden, puis j'ai agrandi la largeur de la sélection. Fonctionne très bien.
Mike
@Charlie S: essayez de mettre le débordement: caché sur le div contenant. Cela fonctionne pour moi avec taht
PierrOz
1
lorsque vous développez la liste déroulante, le débordement: hidden ne fonctionne pas
Marc
Fonctionne bien pour moi. Cela rend la liste déroulante légèrement plus large que la partie supérieure, mais c'est un prix que je suis prêt à payer.
Jimbali
26

Mise à jour importante:

Depuis Firefox V35, la propriété d'apparence fonctionne désormais !!

À partir des notes de publication officielles de Firefox sur V35 :

En utilisant -moz-appearanceavec la nonevaleur sur une liste déroulante, supprimez maintenant le bouton déroulant (bogue 649849).

Alors maintenant, pour masquer la flèche par défaut, c'est aussi simple que d'ajouter les règles suivantes sur notre élément de sélection:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Danield
la source
20

Nous avons trouvé un moyen simple et décent de le faire. C'est cross-browser, dégradable et ne casse pas un post de formulaire. Commencez par définir la zone de sélection opacitysur 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

Ensuite, créez un div avec les mêmes dimensions que la boîte de sélection. Le div doit se trouver sous la boîte de sélection comme arrière-plan. Utilisez { position: absolute }et z-indexpour 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 le fichier innerHTML de la div avec javascript. Easypeasy avec jQuery:

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

C'est tout! Stylisez simplement votre div au lieu de la zone de sélection. Je n'ai pas testé le code ci-dessus, vous aurez donc probablement besoin de le modifier. Mais j'espère que vous comprenez l'essentiel.

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

Shaun
la source
6
Ce n'est pas une mauvaise solution et est similaire à un modèle que j'ai vu pour styliser l'élément d'entrée de téléchargement de fichier, mais il y a plusieurs inconvénients. Tout d'abord, il repose sur JS, ce qui n'est pas idéal. Deuxièmement, si le formulaire a un bouton de réinitialisation, vous devez également écrire cette fonctionnalité (pour le moment, le JS n'écoute que le clic de l'élément select, mais ne répond pas à un événement form.reset). Le remplacement de l'élément select par un div fonctionnera, mais, idéalement, nous pourrions simplement styliser l'apparence des éléments de formulaire. Il existe également des problèmes d'accessibilité liés à la fois à JS et au comportement du formulaire par défaut.
RussellUresti
14

Essayez de cette façon:

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

Ensuite, vous pouvez utiliser une image différente 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 à sélectionner, cette propriété poussera le bouton de la boîte de dépôt par défaut sous la zone de sélection.

Ça marche pour moi! ;)

ninja_corp
la source
6

Bien que ce ne soit pas une solution complète, j'ai trouvé que…

-moz-appearance: window;

… Fonctionne dans une certaine mesure. Vous ne pouvez pas changer l'arrière-plan (-color ou -image) mais l'élément peut être rendu invisible avec color: transparent. Pas parfait mais c'est un début et vous n'avez pas besoin de remplacer l'élément de niveau système par un élément js.

Badminton Stuart
la source
Oui, j'ai remarqué que cela windowavait cet effet, malheureusement, j'avais besoin de définir l'image de fond. C'est dommage que ce ne soit pas très bon dans Firefox.
RussellUresti
Il est regrettable que vous ne puissiez pas appliquer une réinitialisation complète aux éléments de formulaire, oui. Vous pouvez toujours simuler l'arrière-plan en ayant un élément sous <select>, ce qui n'est pas idéal, bien sûr.
Stuart Badminton
1
C'est PARFAIT pour l'impression! Il suffit de définir un media="print"bloc css avec select {-moz-appearance: window;}et supprimera les flèches et les arrière-plans de toutes les sélections sur FF (pour les autres navigateurs, essayez apparence ou -webkit-looks) pour qu'ils ressemblent à du texte brut ou à des titres
FrancescoMM
4

Je pense avoir trouvé la solution compatible avec FF31 !!!
Voici deux options qui sont bien expliquées sur ce lien:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

J'ai utilisé l'option 1: Rodrigo-Ludgero a posté ce correctif sur Github, dont un en ligne démo. J'ai testé cette démo sur Firefox 31.0 et elle semble fonctionner correctement. Testé également sur Chrome et IE. Voici le code html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

et le css:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

Cela fonctionne très bien pour moi!

ferocesalatino
la source
2
Les liens vers des ressources externes sont encouragés, mais veuillez ajouter du contexte autour du lien afin que vos collègues utilisateurs aient une idée de ce que c'est et pourquoi il est là. Citez toujours la partie la plus pertinente d'un lien important, au cas où le site cible serait inaccessible ou serait définitivement hors ligne.
Andrew Stubbs
Merci pour les suggestions! Désolé pour mes fautes!
ferocesalatino
Merci d'avoir modifié votre question, mais elle ne répond toujours pas à la question par elle-même . Veuillez copier les parties de ces liens qui aideront le questionneur afin qu'il puisse résoudre son problème en lisant simplement votre réponse.
Andrew Stubbs
2

Malheureusement pour vous c'est "quelque chose d'extraordinaire". Normalement, ce n'est pas aux auteurs Web de redessiner les éléments de formulaire. De nombreux navigateurs ne vous permettent pas de les styliser, afin que l'utilisateur puisse voir les contrôles du système d'exploitation auxquels il est habitué.

La seule façon de le faire de manière cohérente sur les navigateurs et les systèmes d'exploitation est d'utiliser JavaScript et de remplacer le select éléments par des éléments «DHTML».

L'article suivant montre trois plugins basés sur jQuery qui vous permettent de le faire (c'est un peu vieux, mais je n'ai rien trouvé de courant pour le moment)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

RoToRa
la source
8
Je ne suis pas d'accord pour dire que c'est quelque chose d'extraordinaire, bien que ce soit quelque chose d'expérimental. L'intérêt de la appearancepropriété est de donner aux développeurs le contrôle sur l'apparence des éléments de formulaire, car utiliser JavaScript pour cela est une solution horrible. Les navigateurs ne devraient pas prendre de décision sur l'apparence de quelque chose dans une page - c'est une décision UX, pas une décision du fournisseur de navigateur. Malheureusement, ce n'est pas encore bien pris en charge. Peut-être dans une autre année.
RussellUresti
Je ne considère pas "fantaisie" si je veux que lorsque vous imprimez la page, toutes les sélections ressemblent à un champ sans flèches. Et cela devrait être mon choix, pas le navigateur ou le choix du système d'exploitation. J'ai une sélection avec des mois, et lorsque la page est imprimée, j'ai un CSS spécial pour l'impression qui supprime la flèche sur la page imprimée afin que cela ressemble à un titre "Mars" sans flèches qui n'ont aucun sens sur une page primée.
FrancescoMM
2
/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}
Todd Bruss
la source
+20 pour avoir suggéré d'utiliser un pseudo élément
Zach Saucier
2

Je stylise la sélection aime juste ça

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

Cela fonctionne pour moi dans FF, Safari et Chrome dans toutes les versions que j'ai testées.

Dans IE je mets:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

Vous pouvez également: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {affichage: aucun; }

Alex Moleiro
la source
1

Je sais que cette question est un peu ancienne, mais comme elle apparaît sur google, et c'est une "nouvelle" solution:

appearance: normalSemble bien fonctionner dans Firefox pour moi (version 5 maintenant). mais pas dans Opera et IE8 / 9

Comme solution de contournement pour Opera et IE9, j'ai utilisé le :beforepseudosélecteur pour créer une nouvelle boîte blanche et la placer au-dessus de la flèche.

Malheureusement, dans IE8, cela ne fonctionne pas . La boîte est rendue correctement, mais la flèche dépasse de toute façon ...: - /

L'utilisation select:beforefonctionne bien dans Opera, mais pas dans IE. Si je regarde les outils de développement, je vois qu'il lit correctement les règles, puis les ignore simplement (elles sont barrées). J'utilise donc un <span class="selectwrap">autour du réel <select>.

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

Vous devrez peut-être modifier un peu cela, mais cela fonctionne pour moi!

Avis de non-responsabilité: J'utilise ceci pour obtenir une bonne copie papier d'une page Web avec des formulaires, donc je n'ai pas besoin de créer une deuxième page. Je ne suis pas un haxx0r 1337 qui veut des barres de défilement rouges, des <marquee>balises, etc. :-) Veuillez ne pas appliquer de style excessif aux formulaires à moins que vous n'ayez une très bonne raison.

Martin Tournoij
la source
3
-moz-appearance: normalne semble pas être une option valide dans le Fx 9, et -moz-appearance: none(ce qui est valide) ne supprime pas la flèche vers le bas.
Robin Winslow
Votre solution de chevauchement fonctionne dans IE et FF mais ne fonctionne pas dans Chrome.
vulcan raven
: before et: after les pseudo-éléments ne fonctionnent que sur les éléments qui acceptent le contenu interne. Ce n'est pas le cas du select, ni de l'entrée, ni du fileuploader, etc. Ils sont parfaits pour les divs, les liens, les paragraphes, etc. La raison en est qu'ils ajoutent le contenu non pas avant / après THE ELEMENT lui-même mais avant IT'S CONTENU. Et un élément de sélection ne prend pas en charge quelque chose comme <select> hi.
João Cunha
1

Utilisez la pointer-eventspropriété.

L'idée ici est de superposer un élément sur la flèche déroulante native (pour créer notre flèche personnalisée), puis d'interdire les événements de pointeur dessus. [voir ce post ]

Voici un FIDDLE fonctionnel utilisant cette méthode.

De plus, dans cette réponse SO, j'ai discuté de ceci et d'une autre méthode plus en détail.

Danield
la source
1

Cela fonctionne (testé sur Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}
Ixx
la source
Cela a fonctionné pour moi, mais je n'aimais pas la radio-containervaleur d'un objet sélectionné. Parcourez la référence mozilla -moz-apparence pour obtenir une valeur appropriée (j'ai utilisé menulist-textce qui cache la flèche de sélection dans FF 31)
sglessard
1

en s'appuyant sur la réponse de @ JoãoCunha, un style css qui est utile pour plus d'un navigateur

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}
Daniël Tulp
la source
1

Suite à la réponse de Joao Cunha , ce problème est maintenant sur la liste des tâches de Mozilla et est ciblé pour la version 35.

Pour ceux qui le souhaitent, voici une solution de contournement de Todd Parker, référencée sur le blog de Cunha, qui fonctionne aujourd'hui:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}
crashwap
la source
1

Depuis Firefox 35, "-moz-appearance:none " que vous avez déjà écrit dans votre code, supprimez enfin le bouton fléché comme vous le souhaitez.

C'était un bug résolu depuis cette version.

Luca Detomi
la source
1

Beaucoup de discussions se déroulent ici et là mais je ne vois pas de solution appropriée à ce problème. Enfin fini par écrire un petit code Jquery + CSS pour faire ce HACK sur IE et Firefox.

Calculez la largeur de l'élément (SELECT Element) à l'aide de Jquery. Ajoutez un wrapper autour de l'élément Select et gardez le dépassement caché pour cet élément. Assurez-vous que la largeur de ce wrapper est appox. 25px de moins que celui de SELECT Element. Cela pourrait être facilement fait avec Jquery. Alors maintenant, notre icône est partie ..! et il est temps d'ajouter notre icône d'image sur l'élément SELECT ... !!! Ajoutez simplement quelques lignes simples pour ajouter un arrière-plan et vous avez terminé .. !! Assurez-vous d'utiliser le débordement caché pour l'emballage extérieur,

Voici un exemple de code qui a été fait pour Drupal. Cependant pourrait être utilisé pour d'autres également en supprimant quelques lignes de code spécifiques à Drupal.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);
/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

La solution fonctionne sur tous les navigateurs IE, Chrome et Firefox Pas besoin d'ajouter des hachages de largeurs fixes à l'aide de CSS. Tout est géré dynamiquement à l'aide de JQuery.!

Plus décrit sur: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

user3058338
la source
1

essayez ce css

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Ça marche

subindas pm
la source
0

La appearancepropriété de CSS3 n'autorise pas la nonevaleur. Jetez un œil à la référence W3C . Donc, ce que vous essayez de faire n'est pas valide (en effet Chrome ne devrait pas l'accepter aussi).

Malheureusement, nous n'avons vraiment aucune solution multi-navigateurs pour masquer cette flèche en utilisant du CSS pur. Comme indiqué, vous aurez besoin de JavaScript.

Je vous suggère d'envisager d'utiliser le plugin selectBox jQuery . C'est très léger et bien fait.

Erick Petrucelli
la source
1
Mais noneEST une valeur que Firefox prétend prendre en charge: developer.mozilla.org/en/CSS/-moz-appearance Alors que le style des éléments de formulaire, dans le passé, n'était réalisable que via JavaScript, tout l'intérêt de la appearancepropriété est de s'éloigner à partir de ce. Les fournisseurs de navigateurs ne devraient pas prendre de décisions UX pour les développeurs. Malheureusement, il semble que ce soit encore un peu trop nouveau pour être utilisé efficacement.
RussellUresti
1
@RussellUresti, donc même si la description du préfixe du fournisseur -mozaccepte none(même si cela a fonctionné) ne serait pas correct de l'utiliser. Encore plus concernant un navigateur comme Firefox, qui s'est toujours vanté de suivre exactement les normes.
Erick Petrucelli
0

Vous pouvez augmenter la largeur de la boîte et rapprocher la flèche de la gauche de la flèche. cela vous permet alors de couvrir la flèche avec un div blanc vide.

Jetez un œil: http://jsbin.com/aniyu4/86/edit

user909410
la source
0

Accepteriez-vous des modifications mineures du code HTML?

Quelque chose comme mettre une balise div contenant la balise de sélection.

Regarde.

Galled
la source
0

Ou, vous pouvez couper la sélection. Quelque chose du genre:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Cela devrait couper 30px du côté droit de la boîte de sélection, en supprimant la flèche. Fournissez maintenant une image d'arrière-plan de 170 pixels et le tour est joué, sélectionnez le style

Dusan Smolnikar
la source
0

C'est un énorme hack, mais -moz-appearance: menulist-textça pourrait faire l'affaire.

Anon
la source
Cela a semblé supprimer la flèche de sélection pour moi, mais comme @dendini l'a noté, cela a également supprimé tous les autres
styles de
0

J'avais le même problème. Il est facile de le faire fonctionner sur FF et Chrome, mais sur IE (8+ que nous devons prendre en charge) les choses se compliquent. La solution la plus simple que j'ai pu trouver pour les éléments de sélection personnalisés qui fonctionnent "partout où j'ai essayé", y compris IE8, utilise .customSelect ()

rafaelbiten
la source
0

Une astuce utile pour moi est de définir l'affichage (sélectionne) sur inline-flex. Coupe la flèche à droite de mon bouton de sélection. Sans tout le code ajouté.

  • Pour Fx uniquement. -webkit appearanceencore nécessaire pour Chrome, etc ...
Andrew Ice
la source
2
Ne semble pas avoir d'effet
Chris Nicola
0

La réponse de Jordan Young est la meilleure. Mais si vous ne pouvez pas ou ne voulez pas modifier votre code HTML, vous pouvez envisager de supprimer simplement la flèche vers le bas personnalisée servie à Chrome, Safari, etc. et de laisser la flèche par défaut de Firefox - mais sans doubles flèches. Pas idéal, mais une bonne solution rapide qui n'ajoute pas de HTML et ne compromet pas votre apparence personnalisée dans d'autres navigateurs.

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

CSS:

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

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}
bonbon
la source
0

hackity hack ... une solution qui fonctionne dans tous les navigateurs que j'ai testés (Safari, Firefox, Chrome). N'ayez aucun IE qui traîne, donc ce serait bien si vous pouviez tester et commenter:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, avec image encodée en URL:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

J'utilise l'élément: après pour couvrir la flèche laide. Puisque select ne prend pas en charge: après, j'ai besoin d'un wrapper avec lequel travailler. Maintenant, si vous cliquez sur la flèche, la liste déroulante ne l'enregistrera pas ... à moins que votre navigateur pointer-events: nonene le prenne en charge , ce que tout le monde sauf IE10- fait: http://caniuse.com/#feat=pointer-events

Donc, pour moi, c'est parfait - une solution agréable, propre et sans maux de tête, du moins par rapport à toutes les autres options qui incluent javascript.

tl; dr:

Si les utilisateurs IE10 (ou inférieur) cliquent sur la flèche, cela ne fonctionnera pas. Fonctionne assez bien pour moi ...

Sébastien Schmid
la source
0

Si cela ne vous dérange pas de jouer avec JS, j'ai écrit un petit plugin jQuery qui vous aide à le faire. Avec lui, vous n'avez pas à vous soucier des préfixes des fournisseurs.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Violon ici: JS Fiddle

La condition est que vous devez styliser la sélection à partir de zéro (cela signifie définir l'arrière-plan et la bordure), mais vous voulez probablement le faire quand même.

De plus, puisque la fonction remplace la sélection d'origine par un div, vous perdrez tout style effectué directement sur le sélecteur de sélection dans votre CSS. Donnez donc à l'élément select une classe et stylisez la classe.

Prend en charge la plupart des navigateurs modernes, si vous souhaitez cibler des navigateurs plus anciens, vous pouvez essayer une ancienne version de jQuery, mais peut-être devrez-vous remplacer on () par bind () dans la fonction (non testé)

Hydde87
la source
-2

Les autres réponses ne semblaient pas fonctionner pour moi, mais j'ai trouvé ce hack. Cela a fonctionné pour moi (juillet 2014)

select {
-moz-appearance: textfield !important;
    }

Dans mon cas, j'avais également un champ de saisie woocommerce donc j'ai utilisé ceci

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

Mise à jour de ma réponse pour afficher sélectionner plutôt que saisir

Sol
la source
input.input-text? qu'est-ce que cela a à voir avec l'option de sélection et la question posée?
dendini