# How to make different color for every Option in Select element? **URL:** \ **Category:** How do I?\ **Tags:** select\ **Created:** [July 7, 2025, 3:57pm UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116 "2025-07-07T15:57:05Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 7, 2025, 3:57pm UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/1 "2025-07-07T15:57:05Z")
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 ![Select](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/cb697585b00895c79569fee7aeb0f25f8805250d.png) ---
**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\ **Post date:** [July 8, 2025, 7:11pm UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/2 "2025-07-08T19:11:28Z")
Hi Zoran 👋 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? ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 8, 2025, 7:37pm UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/3 "2025-07-08T19:37:25Z")
Hello Agustin Carozo, No, i didnt tried with AI. I believed that this can be done WeWeb element. I will try with AI. Thanks ---
**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\ **Post date:** [July 9, 2025, 12:34am UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/4 "2025-07-09T00:34:10Z")
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. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [July 9, 2025, 6:24am UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/5 "2025-07-09T06:24:32Z")
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_. ![Screenshot 2025-07-09 at 08.22.48](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2ff6e27b6bb5949eb5a55e6621fd1b3aa1f2f0e0.png) ![Screenshot 2025-07-09 at 08.27.12](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8abe45d679b7c29477ad963d9913e01d67264188.png) ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 9, 2025, 8:45am UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/6 "2025-07-09T08:45:27Z")
Hello Yaj Thanks for the suggestion. But how to know which option was clicked and make action according this? ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 9, 2025, 8:47am UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/7 "2025-07-09T08:47:43Z")
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. ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [July 9, 2025, 9:43am UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/8 "2025-07-09T09:43:11Z")
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 🙂 ---
**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\ **Post date:** [July 9, 2025, 10:12pm UTC](https://community.weweb.io/t/how-to-make-different-color-for-every-option-in-select-element/19116/9 "2025-07-09T22:12:09Z")
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