How do I customize the colors on the multi-select dropdown?

As stated by the title, I’m trying to figure out how I can customize the tag colors on the multi-select dropdown element. The two main problems I am running into:

  • I can’t figure out where I can change those blue tags to a different color.

  • I can, however, customize the tag text color but when I do change it (such as to the white you see on the screenshot) it also changes the text colors still in the dropdown. For example, under that “4K” option is another option that says “5K”. However, you can’t see that because the font is white.


1 Like

Hi @brandon :wave:

You should be able to customize this here:

But I just tried and it looks a bit buggy (I need to refresh the page after changing the background color).

If that doesn’t work for you, I’ve got another pretty cool solution :slight_smile: You can go full custom with the “Free layout”:

Then you can style each option with a different color if you want to. Here’s a video on how to work with the multi-select free layout.

Does that help?

Yep! Thank you!

1 Like

Awesome! By the way, we pushed the bug fix to production yesterday so the experience should be smooth now. Don’t hesitate to let me know if not!

1 Like

Thanks for posting that video @Joyce ! It has helped me figure out customising colours for each option. However, I wasn’t sure how to make the cross icon to remove each option work. How do I do it?


1 Like

Hey @Joyce, I’m adding to this comment, when you switch to Free layout, the remove (X) icon is gone and cannot be accessed, I’ve already filed a bug report.

1 Like

Great question @mervynsimzr!

Here’s one approach:

  • create a workflow on click of the option container (not the options, the individual option)
  • use the Return a value action to find the index of the current option (the formula is available in the list of array no-code formulas and will look something like this: findIndex(input_variable,
  • test that first action before creating the second action
  • use the Change variable value action with the Remove at index option to remove the index returned in the preview action

Here’s a short video walking you through the process.

Does that help?

1 Like

@Joyce Though it might require some effort to implement, but it certainly gets the job done! Thanks for the suggestion!

1 Like

Hey @Joyce (or @mervynsimzr) I was inspired by this thread to mess around with FREE LAYOUT in the multi-select - but now hitting a roadblock.

So far, I set the mult-select to free layout - I dropped the “tag” (the one with icon + text + “x”) into the option and the option - selected flexboxes - and then I bound the text and bg color to a collection (from Xano). So far so good, opening the multi-select shows my bound options and colors.
Also - I did add the workflow to remove a selected option from your video to the “x” in the tag - and that does work.

But my roadblock(s) now are that when I move the mouse over the list of options - all of them change to hover state bg color -
Further - when I click to select one of my options - it does not correctly send the value to the mutli-select variable array of selected items - how do I do that? Right now, if I click on an option it adds an “undefined” to the mutli-select variable array and “breaks” the multi-select.

I am assuming I need to create a workflow to put the right value into the the mutli-select variable array when I select an option - but clueless at the moment how to get there :slight_smile:

Also, I see when I add an option that does not exists - (“Allow to create option” enabled) - that does get added correctly to the variable array - but I would need to way to trigger a workflow to add that new option to Xano table - curious how / where I would do that as well.

Okay - I managed to solve the behavior above. While I bound the options to a collection - I did not assign the Label field and Value filed. So, now that I have done that the issues described above are resolved.

I still have some other behavior that is not yet working correctly, I’ll bang a way a bit more and post a video.

1 Like

Ah that’s great. Well done, Mark!

Love it! I know it’s not always possible but videos help a lot I must say :slight_smile:

Okay @Joyce - here’s loom video with where I am at - there are basicallyTWO problematic behaviors -

#1: On my custom mutli-select- when I search there is a “phantom value” - an extra, undefined value is displayed in the drop down options.

#2: When I delete a selected option - via a workflow when clicking on an “x” on a value on a selected item - it DOES correctly delete from selected options - BUT the drop down opens and displays the options with a repeated value of what was deleted. I feel like if I can prevent the drop down from opening on tha click on “x” workflow all will be well …

Hi Mark!

I recorded a short video for you:

Hey @Joyce - @Max was kind enough to jump on a zoom with me after I followed his video and made further progress. I showed him a what we think is a BUG you can easily recreate by enabling Free Layout and allow to create option - here is a video of the BUG on search - when “Allow to create option” is enabled in Layout type= Free Layout mode:

In addition - I have ANOTHER question (and/or feature request if it’s not currently possible via a work-around): Ability to trigger a workflow when a new option is added - this would allow user to ADD the new custom option to a bound collection or variable for list of options. Not sure if there is a work-around for this??

You have nothing display when you have “allow to create option”, because you didn’t bind the label to your text in the option