Display styling in combo

Webix JS
#1

Hi there,

Ive been able to customize the combo options list using templates. However i could not find an option to change the selected display item using a template.

I found the css option. but that is a one time static thing. Basically id like the selected value to be styled different based on what is being selected.

#2

Hello @faseel,
You can redefine the CSS rule for .webix_selected class applied to a Webix list item:

<style>
.custom .webix_list_item.webix_selected {
  	font-weight:bold;
  	color:#B51454;
  	background-color:#FFAAAA;
  }
</style>

Please check the example:
https://snippet.webix.com/cwbk4i8c

#3

Hi annazankevich,

Thanx for the snippet. I am able to style the values in the list. But i also want the same style in the list to be applied to the input box as well when i select it.

Take a look at the snippet.
https://snippet.webix.com/tayb4xg1

I have styled the list items based on the field #ic#. It appears as i want in the combo list. I want the same style to be displayed when i select the option. How do i do that?

#4

@faseel,
As a solution, you can attact onChange event and add some custom logic: use the native html getElementsByClassName method и change the class name via the className property.
Something like:
https://snippet.webix.com/tetx8oip

#5

Thanx a lot for the solution. Works like a charm.