CODEWITHSUNDEEP
css
CookieEater
CookieEater

Reputation: 2496

CSS - Cannot override font-style in Dropdown

I am trying to put custom styling only on the visible item when the drop down is closed, but not the items inside the drop down.

To do this, I put custom styling on select, then undo them on option. For example, I have font-style: italic set on a select element. But webkit browsers and IE10 seems to ignore font-style overrride.

HTML

<select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
</select>

CSS

select {
    color: red;
    font-style: italic;
}
option {
    color: black; // undos color:red
    font-style: normal!important; // This should undo the italic font style.
}

jsFiddle

Why do those browsers ignore the font-style override even with !important? How can I fix this?

Upvotes: 0

Views: 630

Answers (2)

Ben
Ben

Reputation: 1454

Select boxes have very poor css styling support on all browsers.

To have total control of select box styling you will have to use a javascript solution to replace the select box with something that can be styled. http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/ is one option, or you might be best off looking at a jQuery plugin or Bootstrap.

Upvotes: 1

Erik Lumme
Erik Lumme

Reputation: 5342

What I found through Google was that the option elements are in fact styled by the OS, and can therefore not be styled through CSS (without JavaScript hacks or such).

Upvotes: 0

Related Questions