Is it possible to change the colour of a default suggestion (country) on dropdown menu?

  • cookiecrumble67
    Asked on December 16, 2015 at 9:40 AM

    I have created a form here, resized, edited and changed colours to suit. HOWEVER, I don't seem to be able to edit the text colour in my address dropdown menu > COUNTRY, whereby you can select your country from a list.  I have put in a default country (united kingdom) and it is white, I have tried numerous ways to change this but don't seem to be able to. I am not a coder and would rather not get involved with editing code ... I just wondered if I was missing something?

    Jotform Thread 726781 Screenshot
  • Boris
    Replied on December 16, 2015 at 11:41 AM

    The colors that are currently used in the address drop down field are set by the theme that is applied to your form. We can easily override it, by adding a small bit of custom CSS that will slightly modify the theme to look as you desire.

    The CSS code that we can use to affect only the Country drop downs of your address fields is this one:

    .form-address-country {
        color : #3c3c3c;
    }
    .form-address-country option {
        color : #3c3c3c;
        background : #fff;
    }

    The above code will make the drop down appear as in the following image:

    Is it possible to change the colour of a default suggestion (country) on dropdown menu? Image 1 Screenshot 40

    To add this code to your form, please open it up in the Designer:

    Is it possible to change the colour of a default suggestion (country) on dropdown menu? Image 2 Screenshot 51

    Once the Designer is opened, you can paste the code into the textbox under the CSS tab, and Save your form:

    Is it possible to change the colour of a default suggestion (country) on dropdown menu? Image 3 Screenshot 62

    As a side note, if you wanted to apply the same modification to all drop down fields that would be added to your form, you could use the following CSS code instead:

    .form-dropdown {
        color : #3c3c3c;
    }
    .form-dropdown option {
        color : #3c3c3c;
        background : #fff;
    }

    Please let us know how it goes, and if you need any further clarification or assistance with this, we will be happy to help.

  • cookiecrumble67
    Replied on December 18, 2015 at 7:49 AM

    That was so simple, thank you for your very clear instruction ... Im such a newbie, but it worked!

  • Charlie
    Replied on December 18, 2015 at 10:11 AM

    Thank you for the kind words :) In behalf of my colleague, you are most welcome.

    Feel free to visit us here in the forum if you needed any help again.

    Cheers!