CSS Wybierz pole stylu strzałki

Question

Chcę usunąć domyślną strzałkę z pola wyboru i chcę użyć niestandardowej ikony. Z poprzednich odpowiedzi na SO dowiedziałem się, że nie jest to możliwe (aby działało z większymi przeglądarkami). Jedyną możliwością jest zawinięcie selekcji wewnątrz elementu div i ustawienie jej szerokości większej niż szerokość div i ustawienie overflow: hidden. Próbuję podążać, ale to nie działa. Co robię źle?

HTML:

<div class="selectParent"> 
    <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option>   
    </select> 
</div> 

CSS:

.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; 
} 

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

Answer 1

zajrzyj na

lewa

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

prawej stronie

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

Answer 2

Spróbuj zastąpić

padding: 2px 30px 2px 2px; 

z

padding: 2px 2px 2px 2px; 

To powinno działać.