How to make different color for every Option in Select element?

Hello,

Idea is to have Select element which instead of text, for options will have different colors.

Colors will be taken from some collection source in form of HEX RGB value.

Selected color to not fill area where arrow icon is.

And there is need to have some border around color squares.

Please see uploaded picture.

I cant find how to make it with existing Select element. Can this be done with existing Select element?

Thank you in advance

Hi Zoran :waving_hand:

I tried playing around with our own select elements and I couldn’t achieve this.

Instead I asked the AI to create a custom component and it managed to create a dropdown that selects colors in one shot.

Have you tried that?

Hello Agustin Carozo,

No, i didnt tried with AI. I believed that this can be done WeWeb element.

I will try with AI. Thanks

If you want to try do it without AI, I’d essentially create my own custom component but it would be from weweb elements. You can have a div with an input in it if you want the ability to search or just a div with a text as a place holder. Put an icon at the end of the div with something to indicate you can drop down.

Then you create another DIV with position absolute, make this visible whatever way you want from the a onclick workflow from the first div. In layout this should sit in the same div as the first div but then you can change the position, so it sits under the original div. Then you can create a repeatable list in this dropdown div and you’ll be able to customise this to do whatever colours you want.

Funnily enough, if you use the now deprecated select, you can use the Free layout option for your dropdown items and style them however you want. It’s a shame that WeWeb is actually becoming less flexible as the AI gets integrated into the platform - to accomodate the AI’s limitations.


Hello Yaj

Thanks for the suggestion. But how to know which option was clicked and make action according this?

Hello Broberto,

Thank you. I stopped checking deprecated elements some time ago but this is very interesting from one side, and very disappointing from other that WeWeb decided to move in this direction.

It indeed is, many components are less flexible now, just to please the AI. But one can always use the old ones or make their own, so it’s fine :slight_smile:

1 Like

It’s like any other list, you can add an on click element to the main div inside the repeatable list and then you can store the details of what option you clicked into a variable