CODEWITHSUNDEEP
htmlcss
Abude
Abude

Reputation: 2162

How to make :after work in chrome and IE?

I have this code that's working only on Firefox and not all browsers, although :after works on the others too.

HTML:

<select>
    <option> select </option>
    <option class="red"> one </option>
    <option class="green"> two </option>
    <option class="blue"> three </option>
</select>​

CSS:

option:after {
    content: " ";
    height: 5px;
    width: 5px;
    border-radius: 5px;
    display: inline-block;
}

option.red:after { background: #c00; }
option.green:after { background: #0c0; }
option.blue:after { background: #00c; }

JS Fiddle: http://jsfiddle.net/abude/EAdvP/

Upvotes: 1

Views: 104

Answers (1)

kapa
kapa

Reputation: 78681

Sorry, but most browsers do not give you many CSS possibilities for styling select and option elements. Firefox is quite lenient in this matter - others are not.

I must tell you that in its current form, your code will not work cross-browser. You still have the option of substituting (by the use of Javascript) the select element with some stylable elements and make them act like a dropdown box. There are numerous libraries to do that.

Upvotes: 2

Related Questions