How to style the text of a select box except the options - html

Question

I need to style the text of a select box, not the list of options. When I add a padding to the select box, this is applied to the list of options, as well. Look at this image:
The icon is a pseudo-element ::before of the div. (I use a div because the select box doesn't work with pseudo-elements).
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;
}
<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>
I don't want that the list of options inherits the padding of the main select.

Answer 1

It's hard to tell without knowing the visual styles (FontAwesome?) you have applied in the picture. However, you can use the HTML option element as a CSS Selector:
.select-wrapper .turnintodropdown option {
padding: 0;
}
Alternatively, you can give all your options a class, and style them using that class as well.
Note: styling the padding property of the option element does not currently work in any browser except Firefox, although you can style things like color and background-color in all browsers, including IE11 (I don't have the ability to test older versions of IE).
A Chrome bug report exists for this, but it has been punted down the line for five years already, so I wouldn't hope for a fix soon.