highlight certain items in a dropdown menu

Hello @massimo1971

Thank you very much for using our plugin. Yes, that’s possible. For example, assuming you want to highlight the first and third choices in a dropdown field with different colors and make their texts bold.

The first step will be to assign a class name to the field. Enter the preferred class name through the “Add CSS Layout Keywords” attribute in the Dropdown field settings. In this hypothetical example, I will use my-list

The second step is to define the custom styles. For this enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

.my-list option:nth-child(1){ background: yellow; font-weight:bold;}
.my-list option:nth-child(3){ background: red; color:white; font-weight:bold;}

Best regards.

Hello. It’s almost perfect, but I still need one more adjustment. In the dropdown menu, I created some subgroups. With your code, the first and third items are highlighted in all subgroups. However, I need to highlight only specific items, and not in every subgroup.

https://ibb.co/y8k2yZD

And again. It works perfectly on the computer, but on Android mobile I don’t see any highlighted items.

Thank you and best regards.

• This reply was modified 3 weeks, 2 days ago by massimo1971.
• This reply was modified 3 weeks, 2 days ago by massimo1971.

Hello @massimo1971

If you have configured the DropDown field with optgroup, and you want to apply the modifications only to the options in the first optgroup, you must edit the style definition as follows:

.my-list optgroup:nth-child(1) option:nth-child(1){ background: yellow; font-weight:bold;}
.my-list optgroup:nth-child(1) option:nth-child(3){ background: red; color:white; font-weight:bold;}

However, as you noted, the styles are applied only to the control on the desktop browser, and that is correct because the browsers on mobile devices delegate the visualization of DropDown lists to the device’s native controls.

If you want to control the design of this control on all devices, you must tick the “Include a search box (Experimental)” checkbox in the settings of the DropDown control. However, in this case, the style definition must be edited as follows:

.my-list ul[role="listbox"]>li:nth-child(1) ul li:nth-child(1){background:yellow;}
.my-list ul[role="listbox"]>li:nth-child(1) ul li:nth-child(3){background: red; color:white; font-weight:bold;}

Best regards.

THANKS!!!
Now is perfect!