What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Is it possible to differ the color of the selected option and the other options in the Dropdown field?

    Asked by MaidCrew on November 17, 2016 at 09:00 AM

    Is it possible to have the font-color of the text within the "Show Text in Empty Option" be grey, but once the option is selected, the font-color changes to black

    I've read through:

    https://www.jotform.com/answers/788355-How-to-I-get-the-text-color-in-dropdown-field-to-match-the-text-fields 

    but the problem is that the text used for "show text in empty option" is not a true placeholder, so placeholder css rules don't apply.

    Again, BEFORE someone selects an option within a dropdown, the font-color needs to be grey. Once an option is selected, the font-color nees to be black.

    Is this possible?

    Thanks in advance

    Page URL:
    https://form.jotform.com/63214107153141

    show text empty option font-color dropdown css placeholder
  • Profile Image
    JotForm Support

    Answered by Welvin on November 17, 2016 at 12:38 PM

    You can target the option and then the dropdown. However, this method will also make the Empty Value text as black so the default will always be black.

    You can inject teh following custom CSS codes:

    option {

        color : gray;

    }

    select {

        color : black !important;

    }

    The result will be like this:

     

     

  • Profile Image

    Answered by MaidCrew on November 17, 2016 at 01:28 PM

    Okay... so just to make sure I understand, there is no way to make the Empty Value text grey while allowing the option selected to be black.

    I wasn't sure if the Empty Value text was a separated element (apart from the option element) capable of being manipulated with CSS like a placeholder element?

  • Profile Image
    JotForm Support

    Answered by Welvin on November 17, 2016 at 02:10 PM

    The given codes will do it. However, the empty option text will also turn into black, as if you have it selected. Here's my test form: https://www.jotform.com/63214963852965. The dropdown doesn't have the option to set a normal hint example or placeholder. It's the text empty option, it has no value in the HTML but listed as options.