1

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/

steveax
  • 17,527
  • 6
  • 44
  • 59
Abude
  • 2,112
  • 7
  • 35
  • 58

1 Answers1

2

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.

kapa
  • 77,694
  • 21
  • 158
  • 175
  • Thanks for the answer, but the `after` is compatible on all browsers, the new ones at least and it should work just fine, but don't know why doesn't ... – Abude Aug 09 '12 at 20:58
  • @Jimmy I'm not 100% sure, but I think it has to do with the fact that you add the colored blocks AFTER the options, and not within them. Firefox obviously renders all content within a select menu, but the other browsers probably doesn't. – Tom Aug 09 '12 at 21:01
  • 2
    @Jimmy In fact, `after` and `before` won't work on most form elements in most browsers. Also see http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field – kapa Aug 09 '12 at 21:01
  • @Tom i don't understand what do you mean by "whithin them" can you right a small code so i see? thanks ! – Abude Aug 09 '12 at 21:06
  • @Jimmy -- By "within", he means `` -- in between the ` – Roddy of the Frozen Peas Aug 09 '12 at 21:21