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

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.

I only need to create a padding to position the icon, but the list of options inherits the padding, too, and I want the list of options aligned to the left side. — Unix, Mar 24 '15 at 02:59
Right, but if you look at the list of options, you will see them moved to the right some pixels. I only want that the `padding-left` works for the main select because it's the space needed to display correctly the icon (FontAwesome). — Unix, Mar 24 '15 at 03:03
Your CSS does not apply to the HTML you've provided. None of the elements in your markup have `id="navigation"` — TylerH, Mar 24 '15 at 03:04
Doesn't matter because it was not relevant at all, but I already fixed it. Thanks. — Unix, Mar 24 '15 at 03:05

TylerH · Accepted Answer · 2015-03-26T19:12:55.470

2

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.

edited Mar 26 '15 at 19:12

answered Mar 24 '15 at 03:09

TylerH

20,799
66
75
101

Thank you, I tested it and it's not working. I have no idea why, because it's the logical solution. – Unix Mar 24 '15 at 03:17
@Gerard Can you be more specific about what's working? [This JSFiddle](http://jsfiddle.net/e76sh9fb/) shows it working just fine. If you can create a minimal JSFiddle example that reproduces the problem, then we would be more capable of solving this issue for you. – TylerH Mar 24 '15 at 03:24
Yes, it's true, it's working in Firefox and Opera, but in Chrome it's still showing the padding (not tested in IE/Safari). – Unix Mar 24 '15 at 03:27
I think I've found the reason: «Unfortunately, webkit browsers do not support styling of ` – Unix Mar 24 '15 at 03:34
@Gerard Ah, interesting... yet another bug in Chrome unveiled in recent months. Thanks! I've updated my answer. – TylerH Mar 24 '15 at 03:53

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

1 Answers1