Comment supprimer la flèche d'un élément sélectionné dans Firefox
J'essaie de styliser un élément select en utilisant CSS3. J'obtiens les résultats souhaités dans WebKit (Chrome/Safari), mais Firefox ne fonctionne pas bien (je ne me soucie même pas d'Internet Explorer). J'utilise la propriété CSS3 appearance, mais pour une raison quelconque, je ne peux pas désactiver 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 constater, je n’essaye rien de spécial. Je veux juste supprimer les styles par défaut et ajouter ma propre flèche de liste déroulante. Comme je l'ai dit, excellent dans WebKit, pas excellent dans Firefox. Apparemment, le -moz-appearance: none ne supprime pas l'élément déroulant.
Des idées? Non, JavaScript n'est pas une option
D'accord, je sais que cette question est ancienne, mais 2 ans plus tard, Mozilla n'a rien fait.
J'ai mis au point une solution de contournement simple.
Cela supprime essentiellement tout le formatage de la zone de sélection dans firefox et englobe un élément span autour de la zone de sélection avec votre style personnalisé, mais ne devrait s'appliquer qu'à firefox.
Dites que ceci 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 flèche de sélection affreuse de firefox, suivi de celui de Nice personnalisé. Pas idéal.
Maintenant, pour lancer 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-apparence: window et jetez la flèche personnalisée dans la classe 'css-select-moz' de la classe span, mais ne la faites afficher 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 novice en webdesign et complètement autodidacte). Cependant, cette communauté m'a indirectement apporté tant d'aide, je pensais qu'il était temps que je rende quelque chose en retour.
Je ne l'ai testé que sous firefox (mac) version 18, puis 22 (après la mise à jour).
Tous les commentaires sont les bienvenus.
Update: ceci a été corrigé dans Firefox v35. Voir le Gist complet pour plus de détails.
Vient 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. C'est du pur CSS et ne nécessite aucun balisage supplémentaire.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Testé sous Windows 8, Ubuntu et Mac, dernières versions de Firefox.
Exemple vivant: http://jsfiddle.net/joaocunha/RUEbp/1/
Plus sur le sujet: https://Gist.github.com/joaocunha/6273016
Le truc qui fonctionne pour moi est de faire sélectionner une largeur 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 belles listes déroulantes, utilisez http://harvesthq.github.com/chosen/
Mise à jour importante:
À partir de Firefox V35, la propriété apparence fonctionne maintenant!
De notes de publication officielles de firefox sur V35 :
En utilisant
-moz-appearanceavec la valeurnonedans une liste déroulante, supprimez maintenant le bouton déroulant (bogue 649849).
Alors maintenant, pour cacher la flèche par défaut, il suffit d’ajouter les règles suivantes à notre élément select:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
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>Nous avons trouvé un moyen simple et convenable de le faire. Il est multi-navigateur, dégradable et ne casse pas une publication de formulaire. Commencez par définir la variable opacity de la zone 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
Ensuite, div avec les mêmes dimensions que la zone de sélection. La div doit se situer sous la zone 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 le code innerHTML de la div avec JavaScript. Easypeasy avec jQuery:
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
C'est tout! Style juste 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 Tweak it. Mais j'espère que vous obtenez le Gist.
Je pense que cette solution bat {-webkit-appearance: none;}. Les navigateurs devraient tout au plus dicter une interaction avec des éléments de formulaire, mais pas la manière dont ils ont été affichés au départ sur la page, car cela casse la conception du site.
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, cette propriété va appuyer sur le bouton de la liste déroulante par défaut sous la zone de sélection.
Ça marche pour moi! ;)
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 modifier 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.
Je pense avoir trouvé la solution compatible avec FF31 !!!
Voici deux options 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 publié ce correctif sur Github, y compris une démonstration en ligne. J'ai testé cette démo sur Firefox 31.0 et elle semble fonctionner correctement. Testé sur Chrome et IE également. 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!
/* 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;
}
}
Malheureusement pour vous ce est "quelque chose d'extraordinaire". Normalement, les auteurs Web ne sont pas tenus de redéfinir les éléments de formulaire. De nombreux navigateurs ne vous laissent volontiers pas les styler afin de permettre à l'utilisateur de voir les commandes du système d'exploitation auxquelles ils sont habitués.
La seule façon de le faire systématiquement sur les navigateurs et les systèmes d'exploitation consiste à utiliser JavaScript et à remplacer les éléments select 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é d'actuel pour le moment)
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
Je coiffe 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*/
Aussi, vous pouvez: .votre classe :: - ms-expand {display: none; } .yourid :: - ms-exapan {display: none; }
s'appuyant sur la réponse de @ JoãoCunha, un style CSS utile pour plusieurs navigateurs
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
Cela fonctionne (testé sur Firefox 23.0.1):
select {
-moz-appearance: radio-container;
}
Beaucoup de discussions ont lieu 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 & Firefox.
Calculer la largeur d'un élément (élément SELECT) à l'aide de Jquery . Ajouter un wrapper autour d'un élément sélectionné et conserver le débordement masqué pour cet élément. Assurez-vous que la largeur de ce wrapper est appox. 25px moins que celle de l'élément SELECT. 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 à l’élément SELECT ... !!! Il suffit d’ajouter quelques lignes simples pour l’ajout d’arrière-plan et vous êtes tous faits. !! !! Assurez-vous d’utiliser le débordement masqué pour le wrapper ,
Voici un exemple de code qui a été réalisé pour Drupal. Cependant, pourrait être utilisé pour d'autres également en supprimant quelques lignes de code qui est spécifique à 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 FirefoxPas besoin d'ajouter des hachures de largeurs fixes en utilisant CSS. Tout est géré de manière dynamique à l'aide de JQuery.!
Plus Décrit à: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css
essayez ce css
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
}
Ça marche
Suite à 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 par Todd Parker, référencée sur le blog de Cunha, qui fonctionne aujourd'hui:
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;
}
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.
Je sais que cette question est un peu ancienne, mais puisqu'elle se présente sous google, il s'agit d'une "nouvelle" solution:
appearance: normal semble fonctionner correctement dans Firefox (version 5 maintenant). mais pas dans Opera et IE8/9
En guise de solution de contournement pour Opera et IE9, j'ai utilisé le pseudosélecteur :before 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 quand même ...: - /
Utiliser select:before fonctionne bien dans Opera, mais pas dans IE. Si je regarde les outils de développement, je vois qu’ils lisent correctement les règles, puis les ignore (ils sont barrés). J'utilise donc un <span class="selectwrap"> autour du <select> actuel.
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!
Disclaimer: J'utilise ceci pour obtenir une bonne copie papier d'une page Web avec des formulaires, ainsi je n'ai pas besoin de créer une deuxième page. Je ne suis pas un 1337 haxx0r qui veut des barres de défilement rouges, des balises <Marquee> et tout le reste :-) S'il vous plaît ne le faites pas appliquez un style excessif aux formulaires, sauf si vous avez une très bonne raison.
Utilisez la propriété pointer-events.
L'idée ici est de superposer un élément sur la flèche déroulante native (pour créer notre élément personnalisé), puis d'interdire les événements de pointeur sur celui-ci. [voir ce post ]
Voici un _ _ VIOLON utilisant cette méthode.
De même, dans cette SO réponse j’ai discuté de cette méthode et d’une autre méthode plus en détail.
Ou, vous pouvez couper la sélection. Quelque chose dans le genre de:
select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }
Cela devrait couper 30px du côté droit de la zone de sélection, en enlevant la flèche. Maintenant, fournissez une image d’arrière-plan de 170px et le tour est joué, sélectionnez
La propriété appearance de CSS3 n'autorise pas la valeur none. Regardez la référence W3C . Donc, ce que vous essayez de faire n'est pas valide (en effet, Chrome ne devrait pas accepter aussi).
Malheureusement, nous n’avons vraiment aucune solution multi-navigateur 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 plugin selectBox jQuery . C'est très léger et bien fait.
Si ça ne vous dérange pas de jouer avec JS, j'ai écrit un petit plugin jQuery qui vous aide à le faire. Avec cela, vous n'avez pas à vous soucier des préfixes des vendeurs.
$.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;
};
Fiddle ici: JS Fiddle
La condition est que vous devez attribuer un style à la sélection à partir de zéro (cela signifie définir l’arrière-plan et la bordure), mais vous souhaiterez probablement le faire quand même.
De plus, étant donné que la fonction remplace la sélection d'origine par une 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 appelez-la.
Prend en charge la plupart des navigateurs modernes. Si vous souhaitez cibler des navigateurs plus anciens, vous pouvez essayer une version plus ancienne de jQuery, mais vous devez peut-être remplacer on () par bind () dans la fonction (non testée).
Accepteriez-vous des modifications mineures au code HTML?
Quelque chose comme mettre une balise div contenant la balise select.
Un hack utile pour moi est de régler l'affichage (sélectionné) sur inline-flex. Coupe la flèche à droite de mon bouton de sélection. Sans tout le code ajouté.
- Pour Fx seulement.
-webkit appearancetoujours nécessaire pour Chrome, etc ...
Vous pouvez augmenter la largeur de la boîte et déplacer la flèche plus près de la gauche. cela vous permet ensuite de couvrir la flèche avec un div blanc vide.
Regardez: http://jsbin.com/aniyu4/86/edit
La réponse de Jordan Young est la meilleure. Mais si vous ne pouvez pas ou ne voulez pas changer votre code HTML, vous pouvez envisager de simplement supprimer la flèche vers le bas personnalisée fournie à Chrome, Safari, etc. et de laisser la flèche par défaut de firefox, mais sans double flèche. Pas idéal, mais une bonne solution rapide qui n’ajoute aucun code HTML et ne compromet pas votre apparence personnalisée dans les 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;
}
}
J'avais le même problème. Il est facile de le faire fonctionner sur FF et Chrome, mais sur IE (8+ qu’il faut 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, est d'utiliser .customSelect ()
C'est un énorme bidouillage, mais -moz-appearance: menulist-text pourrait faire l'affaire.
hackity hack ... une solution qui fonctionne dans tous les navigateurs que j'ai testés (Safari, Firefox, Chrome). N'ayant pas d'IEs traînant, ce serait bien si vous pouviez tester et commenter:
<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>
CSS, avec une 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: after-element pour recouvrir la flèche laide. Puisque select ne prend pas en charge: après, j'ai besoin d'un wrapper pour travailler avec . Maintenant, si vous cliquez sur la flèche, le menu déroulant ne l'enregistrera pas ... sauf si votre navigateur prend en charge pointer-events: none, 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 peu maux de tête, du moins par rapport à toutes les autres options qui incluent le javascript.
tl; dr:
Si les utilisateurs de IE10 (ou inférieur) cliquent sur la flèche, cela ne fonctionnera pas. Ça marche assez bien pour moi ...