J'essaie de remplacer la flèche d'une sélection par une image de ma part. J'inclus la sélection dans un div avec la même taille, je définis l'arrière-plan de la sélection comme transparent et j'inclus une image (avec la même taille que la flèche) dans le coin supérieur droit de la div comme arrière-plan.
Cela ne fonctionne que dans Chrome.
Comment puis-je le faire fonctionner dans Firefox et IE9 où j'obtiens ceci:
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}<HTML>
<HEAD>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>
appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;J'ai configuré un
selectavec une flèche personnalisée similaire à la réponse de Julio, mais elle n'a pas de largeur définie et utilise unesvgimage de fond. (àarrow_drop_downpartir des icônes Material-ui)Si vous en avez besoin pour fonctionner également dans IE, mettez à jour la flèche svg en base64 et ajoutez ce qui suit:
Pour faciliter la taille et l'espace de la flèche, utilisez ce svg:
Il n'a aucun espacement sur les côtés de la flèche.
la source
background-position: top 5px right 4px;background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat transparent;background-position-y: 5px;au lieu de% (par exemplebackground-position-y: 50%;)?Travailler avec une seule classe:
http://jsfiddle.net/qhCsJ/4120/
la source
background-position-x: calc( 100% - 5px );Voici une solution élégante qui utilise une plage pour afficher la valeur.
La mise en page est comme ceci:
JsFiddle
la source
Cela fonctionnerait bien en particulier pour ceux qui utilisent Bootstrap, testé dans les dernières versions de navigateur:
la source
Vérifiez celui-ci C'est piraté, aussi simple que cela:
-prefix-appearancesurnonepour supprimer les stylestext-indentpour "pousser" le contenu un peu vers la droitetext-overflowune chaîne vide. Tout ce qui dépasse sa largeur deviendra ... rien! Et cela inclut la flèche.Maintenant, vous êtes libre de le styliser comme vous le souhaitez :)
Vue sur JSFiddle
la source
Cela fonctionne dans tous les navigateurs:
la source
Stylisez l'étiquette avec CSS et utilisez des événements de pointeur:
et le CSS relatif est
Je viens d'utiliser une flèche vers le bas ici, mais vous pouvez définir un bloc avec une image d'arrière-plan. Voici un exemple de violon laid: https://jsfiddle.net/1rofzz89/
la source
J'ai référé ce post , cela a fonctionné comme du charme, sauf qu'il ne cachait pas la flèche dans le navigateur IE.
la source
Supposons que selectDrop est la classe présente dans votre balise HTML, donc cette quantité de code suffit pour changer l'icône de flèche par défaut:
la source