Почему не работает в ХРОМЕ и как исправить?

Question

[coderisimo]

В JS присваиваю элементам выпадающего списка (option) классы .

.st1:after {
   /*margin-left: 10px;*/
   content: url('/assets/imgs/1st.png');
   /*display: inline-block;*/
 }
 
 .st2:after {
   margin-left: 10px;
   content: url(/assets/imgs/2st.png);
   display: inline-block;
 }
 
 .st3:after {
   margin-left: 10px;
   content: url(/assets/imgs/3st.png);
   display: inline-block;
 }

в лисе все работает замечательно, а в хроме нет. Что за .... ? И как ее победить?
Может дело в том , что динамически присваиваю? Но в лисе подобных проблем не было никогда
Спасибо

PS В описании классов разный синтаксис, ибо пробовал разные варианты. Не работает ни один.

Comments

[0leg5ergeev]

видимо, хром не поддерживает таких извращений. Попробуйте использовать select2 сначала, а потом туда вот этих псевдо-классы

[0leg5ergeev]

*эти

[coderisimo]

0leg5ergeev: спасибо, так и сделал

Answer 1

[Дима Паутов]

Потому что опции вообще почти не могут быть стилизованы, а тем более иметь псевдоэлементы!

Comments

[coderisimo]

да что вы говорите? Как засунуть в :after разноцветные буквы?

[Дима Паутов]

coderisimo: И что это? Где рабочий пример?

[coderisimo]

Дима Турков: это мой личный пример того, как все нормально стилизуется. во всяком случае в лисе это работает нормально.

[Максим]

coderisimo: вот смотрите - если это работает только в Лисе но не работает в других броузерах то ваш пример не кроссбраузерный , в Хроме тоже много что работает а в Лисе нет

[Дима Паутов]

coderisimo: Может в лисе это и работает, но option никогда нельзя было стилизовать. Иначе че не было нужды создавать целые библиотеки, на подобие select2 и прочих.