Вопросница

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

Запихнул все это в пользовательскую часть css хики, ни чего не произошло.

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

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

brobike.ru/index.php/shop/bike

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

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

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

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

Code:

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

Вот спасибо добрый человек, выручил, так и знал, что в тексте ошибка какая-то, я уже и с select и без вообщем все перепробовал

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

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

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

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

Я думал сделать картинкой, но не хочется заморачиваться с каждым цветом, потому что каждый год они меняются, и гораздо легче поменять black например на #345345, также я еще прописывал backroung, что бы полностью линию цветом заливать, но текст тогда не читаемый.
Я вот не могу понять откуда берутся картинки в этом примере :before{content:"\2666 "; color:red} content: \2666 - это карточная буби, так же там есть червы, точно должен быть и квадрат.

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

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

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

в составе Windows есть такая программа - таблица символов. В ней вы найдете коды всех символов шрифта





код для квадратика вы видите на картинке

progreccor wrote:

Kosenkov wrote:

Code:

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

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

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

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

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

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

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

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

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

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

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

Строку то я поставил, но она не выводит $ и никакие другие символы тоже.

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

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

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

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

Это Chrome не хочет работать с :before firefox работает

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

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

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

Судя по статье это баг всех браузеров кроме Firefox

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

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

Ну ладно переживем. Спасибо огроменно за столь подробную консультацию. Если нужен будет велосипед хороший обращайтесь

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

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

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

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

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





то есть вы в процентах задаете границу перехода цветов....