Modifier le style de la flèche
j'essaie de remplacer la flèche d'un select par une image de moi-même. J'Inclus Le select dans un div avec la même taille, j'ai placé le fond du select comme transparent et j'inclus une image(avec la même taille que la flèche) dans le coin supérieur droit du div comme fond.
il ne fonctionne qu'en Chrome.
Comment puis-je le faire fonctionner dans Firefox et IE9 où je vais obtenir 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>8 réponses
Avez-vous essayé quelque chose comme ceci:
.styled-select select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
N'a pas été testé, mais ça devrait marcher.
EDIT : il semble que Firefox ne supporte pas cette fonctionnalité jusqu'à la version 35 ( lire la suite ici )
il y a une solution ici , jetez un oeil à jsfiddle sur ce post.
travailler avec une seule classe:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
voici une solution élégante qui utilise une portée pour montrer la valeur.
Layout est comme ceci:
<div class="selectDiv">
<span class="selectDefault"></span>
<select name="txtCountry" class="selectBox">
<option class="defualt-text">-- Select Country --</option>
<option value="1">Abkhazia</option>
<option value="2">Afghanistan</option>
</select>
</div>
j'ai mis en place un select avec une flèche personnalisée similaire à la réponse de Julio, mais il n'a pas de largeur définie et utilise un svg comme image de fond. ( arrow_drop_down à partir de matériau de l'interface utilisateur des icones)
select {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border: 1px solid #dfdfdf;
border-radius: 2px;
margin-right: 2rem;
padding: 1rem;
padding-right: 2rem;
}
si vous avez besoin qu'il fonctionne aussi dans IE, mettez à jour la flèche svg pour base64 et ajoutez ce qui suit:
select::-ms-expand { display: none; }
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
cela fonctionnerait bien en particulier pour ceux qui utilisent Bootstrap, testé dans les dernières versions de navigateur:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Some browsers will not display the caret when using calc, so we put the fallback first */
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>vérifiez celui-ci C'est hacky, aussi simple que ça:
- Set
-prefix-appearanceànonepour supprimer les styles - Utiliser
text-indentà "pousser" le contenu d'un bit vers la droite - enfin, mettez
text-overflowsur une chaîne vide. Tout ce qui s'étend au-delà de sa largeur deviendra... rien! Et ça inclut la flèche.
Maintenant vous êtes libre de le styliser comme vous voulez :)
Voici mon exemple de jsfiddle: http://jsfiddle.net/AEt5k/1 /
le Style de l'étiquette avec le CSS et l'utilisation des événements de pointeur :
<label>
<select>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
</label>
et le CSS relatif est
label:after {
content:'BC';
display:inline-block;
color:#000;
background-color:#fff;
margin-left:-17px; /* remove the damn :after space */
pointer-events:none; /* let the click pass trough */
}
je viens d'utiliser une flèche vers le bas ici, mais vous pouvez définir un bloc avec une image de fond. Voici un bel échantillon de violon: https://jsfiddle.net/1rofzz89/
il fonctionne dans tous les navigateurs:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
background-position-x: 244px;
}