web-dev-qa-db-fra.com

Style de flèche de la zone de sélection CSS

Je souhaite supprimer la flèche par défaut de la zone de sélection et utiliser une icône personnalisée. D'après les réponses précédentes à SO, j'ai découvert qu'il n'était pas possible (de le faire fonctionner avec les principaux navigateurs). La seule possibilité est d’envelopper la sélection dans une div et de définir sa largeur plus que la largeur de la div et le débordement de paramètre: hidden . J'essaie de suivre, mais cela ne fonctionne pas. Qu'est-ce que je fais mal?

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 30px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>

JSFiddle:http://jsfiddle.net/gcPmC/

htmlcsscss3
19
user1251698

regarde ça 

côté gauche

http://jsfiddle.net/afshinprofe/qhCsJ/1/

côté droit

http://jsfiddle.net/afshinprofe/qhCsJ/3/

33
Afshin

Veuillez suivre le chemin comme ci-dessous:

.selectParent {
	width:120px;
	overflow:hidden;   
}
.selectParent select { 
	display: block;
	width: 100%;
	padding: 2px 25px 2px 2px; 
	border: none; 
	background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") right center no-repeat; 
	appearance: none; 
	-webkit-appearance: none;
	-moz-appearance: none; 
}
.selectParent.left select {
	direction: rtl;
	padding: 2px 2px 2px 25px;
	background-position: left center;
}
/* for IE and Edge */ 
select::-ms-expand { 
	display: none; 
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>
<br />
<div class="selectParent left">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>           
   </select>
</div>

0
Hanif

Essayez de remplacer le

padding: 2px 30px 2px 2px;

avec

padding: 2px 2px 2px 2px;

Ça devrait marcher.

0
Thierry J.