Css - Выбрать с фоновым изображением и отступом выбора (IE)

Question

У меня есть проблема с выбором ввода для корректного отображения в Internet Explorer, хотя он хорошо работает в Firefox, Safari и Chrome.

Текст выделения идет полностью вниз влево и должен иметь 60 пикселей левой прокладки, как на хроме, сафари и firefox.

Пожалуйста, проверьте его на jsfiddle, который я подготовил. Не могли бы вы помочь?

HTML

<div id="form-selector">  
<select name='someinput' id='someinput' class="form-control img-input"> 
<option value="" selected="selected">1</option> 
<option value="">2</option> 
</select> 
</div> 

CSS:

#form-selector select { 
    overflow: -moz-hidden-unscrollable; 
    width: 100%; 
    height: 35px; 
    background:#fff; 
    margin-bottom:14px; 
    font-size: 14px; 
    color:#000000; 
    -webkit-appearance: menulist; 
} 

// Firefox Fix 
@-moz-document url-prefix() { 
#form-selector select { 
    text-indent: 30px; 
} } 


.img-input { 
background:url(http://placehold.it/60x30) no-repeat left center #ffffff !important; 
    padding-left:60px; } 

JS FIDDLE

https://jsfiddle.net/nitadesign/02uj91gp/15/

Answer 1

@Nita У меня не было никаких проблем с
· Safari
Chrome
· Opera
· IE 10

, но у меня были проблемы с Firefox

попробуйте добавить это в ваш код

#form-selector select { 
    padding-left: 60px; 
} 

и, как вы можете скачать сафари для окон

EDIT
решение для Safari можно посмотреть здесь Padding doesn't work on select tags in Safari