Seçim kutusundan varsayılan oku kaldırmak ve özel simge kullanmak istiyorum. SO'daki önceki cevaplardan, bunun mümkün olmadığını öğrendim (büyük tarayıcılarla çalışmasını sağlamak için). Tek olasılık, seçimi bir div içine sarmak ve genişliğini div genişliğinden daha fazla ayarlamak ve overflow: hidden ayarını yapmaktır. Aşağıdakileri deniyorum, ancak çalışmıyor. Neyi yanlış yapıyorum?
.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:
Lütfen aşağıdaki yolu izleyiniz:
.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>