Changing font colour only AFTER item has been selected in dropdown menu


*Please refer to our Dropdown Menu page.

*Before user clicks on the Select Field, we want the default text ‘Pick a color’ to be grey. This choice will remain grey throughout.

When user selected an item - in this case, blue, yellow or green - we want the selected item’s font colour to change to black.

Right now we can only pick one font color to use for when Select Field is clicked and even after any drop menu item is selected. How can we change that please? :slight_smile:

Here is my site Read-Only: LINK

Hey Skinpores

You’d need to add some custom javascript for this to work.
You can add custom attribute on the select field:


Add an inline script with a fuction (eg. myFunction()) that:

  1. gets the text of the selected color

  2. compares the text with some colors you have set for the specific options

  3. changes the background-colorof the select field (use the ID selector) to that specific option

The function gets called each time the selet field value changes (looses focus)

Hope this brings you a little closer to your solution. Feel free to ask for further questions :slight_smile:

Hey! Thanks for your input. Gotta be honest here - we are not coders, so we vaguely got what you are saying. Sorry :neutral_face:

In our case, is it easier to set the default text color to black, and then use custom javascript to set ‘Pick a color’ to be grey at all times, then to try and set all the other drop down items font color to be black onclick?