Вопросница

progreccor wrote: таким образом вы просто поменяете цвет шрифта нужного пункта, но зато увидите как это работает.
а потом уже добавьте к каждому пункту по :before....

ссылку на вашу страницу

progreccor wrote: ссылку на вашу страницу

добавьте вот эту строку в файл frontend_custom.css

#filter_filter_14_module_717 > option:nth-child(2) {
    color: red;
}

по аналогии прописываете остальные правила для других строк (меняя nth-child)

а затем сможете уже самостоятельно выставить квадратик для каждой строки с помощью :before

progreccor wrote: добавьте вот эту строку в файл frontend_custom.css

#filter_filter_14_module_717 > option:nth-child(2) {
    color: red;
}

квадратик очень легко сделать с помощью background-image: url(......);
делаете картинки с нужными цветами и используете их в качестве фона.
как раз если сделать ширину картинки порядка 15px то получится самое то.

главное там же сделать padding-left: 20px;

progreccor wrote: квадратик очень легко сделать с помощью background-image: url(......);
делаете картинки с нужными цветами и используете их в качестве фона.
как раз если сделать ширину картинки порядка 15px то получится самое то.

главное там же сделать padding-left: 20px;

Kosenkov wrote: Подскажите куда нужно :before засунуть?
Так не работает
#filter_filter_14_module_717 > option:nth-child(2){ :before{content:"\2666 "; color:red}
}

#filter_filter_14_module_717 > option:nth-child(2):before { 
 content:"\2666 "; 
 color:red
}

progreccor wrote:

Kosenkov wrote:

#filter_filter_14_module_717 > option:nth-child(2):before { 
 content:"\2666 "; 
 color:red
}

прошу обратить внимание на отсутствие пробелов перед :

Не добавляет ничего :before в такой расстановке. Пробовал и добавлять и удалять пробелы, тишина.

но я же вижу работающую строку у вас.
вы там поставили сейчас "$"
ну так замените этот символ на квадратик!

В программе "таблица символов" выберите квадратик, нажмите кнопку "скопировать" и все!
вставьте его вместо доллара!

В чем проблема?

Я не буду уже дальше объяснять очевидные вещи...

progreccor wrote: но я же вижу работающую строку у вас.
вы там поставили сейчас "$"
ну так замените этот символ на квадратик!

В программе "таблица символов" выберите квадратик, нажмите кнопку "скопировать" и все!
вставьте его вместо доллара!

В чем проблема?

Я не буду уже дальше объяснять очевидные вещи...

progreccor wrote: но я же вижу работающую строку у вас.
вы там поставили сейчас "$"
ну так замените этот символ на квадратик!

В программе "таблица символов" выберите квадратик, нажмите кнопку "скопировать" и все!
вставьте его вместо доллара!

В чем проблема?

Я не буду уже дальше объяснять очевидные вещи...

мы смотрим на разные сайты?

это баг хрома.
stackoverflow.com/questions/11903273/why...work-only-in-firefox
Связано с тем что <option> рассматривается как replacebale элемент....
Надо другой подход использовать

progreccor wrote: это баг хрома.
stackoverflow.com/questions/11903273/why...work-only-in-firefox
Связано с тем что <option> рассматривается как replacebale элемент....
Надо другой подход использовать

ну если строго говорить - это баг спецификации.
Там не определено поведение для таких ситуаций

progreccor wrote: ну если строго говорить - это баг спецификации.
Там не определено поведение для таких ситуаций

ну ладно, раз уж пошла такая пьянка - расскажу как решить вашу проблему....

как известно, для background можно использовать градиенты....
Инструмент для их генерации вот www.colorzilla.com/gradient-editor/

Так вот - возьмите такой градиент, который состоит только из двух цветов - нужных вам. И чтобы там был резкий скачок с нужного вам цвета на белый.

Вот вам и решение проблемы....

это будет выглядеть примерно так: