Ich möchte den Standardpfeil aus dem Auswahlfeld entfernen und ein eigenes Symbol verwenden. Aus den vorherigen Antworten auf SO, habe ich herausgefunden, dass es nicht möglich ist (um es mit den wichtigsten Browsern zu arbeiten). Die einzige Möglichkeit besteht darin, das Auswahlfeld in ein div zu packen und seine Breite größer als die div-Breite zu setzen und overflow: hidden einzustellen. Ich versuche folgendes, aber es funktioniert nicht. Was mache ich falsch?
.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:
Bitte folgen Sie dem Weg wie unten:
.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>
Versuchen Sie, die
padding: 2px 30px 2px 2px;
durch zu ersetzen.
padding: 2px 2px 2px 2px;
Es sollte funktionieren.