Dropdown option style

[valentin.guichard]

Hi,
Is it possible with the dropdown list to have different style for each option ?
For example :

If I get a notification on the line 043001 I would like that the option 043001 be in yellow

Thank you

[victordcq]

kinda but not very practical

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…

[Elizabeth_Engler]

I second this. I am trying to set the background color of each option as well based on data for the option.

[simeonw]

You can use markdown to inject a custom stylesheet element into the page, which can apply styles to each element in the dropdown based on their value:

It is fairly straightforward:

1. Give the dropdownOptionsStyle an empty style class, so that you can target the particular dropdown modal (cannot use domId, as it is assigned only to the dropdown component, not the options modal).
   

2. Create a new markdown component to inject the <style> tag with the appropriate CSS styles. You will need to disable escapeHtml and create a binding on the source prop like so.

	styleClass = value['targetStyleClass']
	styles = [s.value for s in value['styles']]
	
	css = "\r\n".join([".iaDropdownCommon_options .psc-%s[data-label='%s'] { color:white; background-color: %s;}\r\n\r\n" % (styleClass,v['value'].value,v['color'].value) 
			 for v in styles])
	code = "<style type='text/css'>\r\n %s \r\n</style>" % css
	return code