Question

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/

Answer 1

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.