Как стилизовать текст окна выбора, кроме опций

Question

Мне нужно стилизовать текст окна выбора, а не список опций. Когда я добавляю padding в поле выбора, это также применяется к списку параметров. Посмотрите на это изображение:

Это мой HTML:

<div class="select-wrapper"> 
    <select class="turnintodropdown"> 
     <option selected="selected" value="">Menu</option> 
     <option value="http://localhost/wpdev/sample-page/"> Sample Page</option> 
     <!-- And more options... --> 
    </select> 
</div> 

Икона является псевдо-элемент ::before из div. (Я использую div, потому что поле выбора не работает с псевдоэлементами).

CSS-:

select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    cursor: pointer; 
    display: inline-block; 
    height: 35px; 
    padding: 7px; 
    padding-left: 30px; 
} 

select::-ms-expand { 
    display: none; 
} 

.select-wrapper { 
    display: inline-block; 
    float: right; 
    position: relative; 
} 

.select-wrapper:before { 
    color: #ccc; 
    content: "\f0c9"; 
    display: inline-block; 
    font: 16px "FontAwesome"; 
    padding: 9px; 
    pointer-events: none; 
    position: absolute; 
} 

Я не хочу, чтобы список опций наследует отступы основного выбора.

Answer 1

Трудно сказать, не зная визуальные стили (FontAwesome?), Которые вы применили на картинке. Тем не менее, вы можете использовать элемент HTML option как CSS Selector:

.select-wrapper .turnintodropdown option { 
    padding: 0; 
} 

В качестве альтернативы, вы можете дать все варианты класс, и стиль их с помощью этого класса, а также.

Примечание: стилизации padding свойства option элемента в настоящее время не работает в любом браузере, кроме Firefox, хотя вы можете вещи в стиле, как color и background-color во всех браузерах, включая IE11 (я не имею способность тестирование старых версий IE).

Для этого существует Chrome bug report, но он был пропущен по линии уже пять лет, поэтому я не буду надеяться на исправление в ближайшее время.