如何设置除选项之外的选择框的文本样式

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选择器：

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

或者，您可以为所有选项提供一个类，并使用该类对其进行样式设置。

注意：样式padding元素的option属性目前在除Firefox之外的任何浏览器中都不起作用，尽管可以样式color和所有浏览器中都有background-color，包括IE11（我没有能力测试旧版本的IE）。

为此存在Chrome bug report，但它已经被罚了五年了，所以我不希望很快得到修复。