Can we give different colors to the options of Perspective Dropdown Component

Unfortunatly the css selector :visited doesnt seem work because the dropdown gets removed by igntion when it closes. or there are no links attachted to the options

Now you could i suppose put a binding on dropdownOptionStyle.classes
and create a bunch of classes like so DropDownHighlight1 with then a theme.css to use the nthcheild selector

However… you will have to make a bunch of styles for every possible selection and make the binding selected the right classes…

Not to bad for a few option, but still a bunch of copypaste work if you have many options. So good luck with that xd Atleast it will work for every dropdown if you select the style So it would only be a lot of work once (apart from the logic to select the correct styleclass)

.psc-DropDownHighlight1:nth-child(1){
background-color:red;
}
.psc-DropDownHighlight2:nth-child(2){
background-color:red;
}
.psc-DropDownHighlight3:nth-child(3){
background-color:red;
}

you can either let your binding select both classes or create a class that selects both xd
I suppose it might be more logical in the binding, also less work than created classes for every combination

.

psc-DropDownHighlight1and3:nth-child(1), .psc-DropDownHighlight1and3:nth-child(3){
background-color:red;
}

Also note that you dont need to create the styleclasses in the designer,
aslong as the names match the css selector
in this case styleclass DropDownHighlight1 (and 2) does not have to exist in the designer
the expression on the style.classes would have to return a string where every class is seperated by a space
image

2 Likes