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

    have background and colored fonts in drop down menu selections, keep that formatting after selection

    Asked by guineapigme on March 08, 2015 at 04:44 PM

    http://www.jotform.com/?formID=50665745707160#

     

    In my configurable list, I would like my drop down items to have different colors in the back ground and/or in the text field adjacent to it so that the category is easily determinable visually

     

    I would like those fields to retain their formatting after the color selection.

     

    I currently have country, highland, music, break, and narration and so need color codings for these.

    select color dropdown color dropdown background
  • Profile Image
    JotForm Support

    Answered by jonathan on March 08, 2015 at 07:03 PM

    You can use a CSS code to change the background of background option similar to the discussion here:

     http://www.jotform.com/answers/482682-Is-there-a-way-via-CSS-to-set-the-colour-of-each-Dropdown-option

     

    So it becomes like this:

     

    I think there is no means to dynamically change also the background-color for the selected option base on the color highlight of the selected option.

    But I will consult from colleagues if they have solution for that. 

    We will let you know here.

    Thanks,

     

     

     

     

     

  • Profile Image

    Answered by guineapigme on March 08, 2015 at 07:51 PM

    Added the code, but do not see it taking effect.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2015 at 02:22 AM

    Hi,

    Upon checking your form, it seems that you are missing some "}" in your custom CSS code.

    option {

     color: #FFF;

    }

    option:nth-child(2) {

     background: blue;

    }

    option:nth-child(3) {

     background: red;

    }

    option:nth-child(4) {

     background: green;

    }

    option:nth-child(5) {

     background: purple;

    }

    option:nth-child(6) {

     background: purple;

    }

    Regarding the changing of background color for the selected option, we're still looking for a workaround for it, but if you want to have it one color only and not changing dynamically, you can do that by using this code:

    select {

    background: insert color here;

    }

    I hope this helps.

    Thank you.

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 10:52 AM

    I added the missing brackets, but still cannot see the change.

     

    So if I understand you clearly, there is no way, based on the drop down field selection to change the color of the font of the selected option,  nor the background?

     

    Is there a way to select different fonts for the drop down menu?  I am looking for a way to be able to easily pick out the different categories after selection.

     

    That is, upon selecting option A, I cannot make the drop down selection text nor any other field's text nor background change color?

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2015 at 11:37 AM

    Hi,

    I'm not sure though if I understand it correctly. If you are asking to change it dynamically based from the selection, that is possible probably is you are using the form's full source code and edit it directly.

    If you would just like to change the background and font color for the selected option, that is possible by adding this code:

    select {

    font-color: white;

    background: pink;

    }

    So basically the selected option will be in white font and pink background color. You can check the changes I've made in this cloned form: http://form.jotformpro.com/form/50674258580966

    I hope this helps.

    Thank you.

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 11:50 AM

    I'm afraid that wasn't what I was looking for unfortunately.  I am also confused as to why my CSS additions of before aren't working for me.

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 09, 2015 at 01:05 PM

    This is what I see in your form config list drop down as of this writing. It seems working fine with my Chrome, Firefox and IE browsers. 

    Are you referring to the background of the selected option? If so, my colleague's solution above should work. Just append it on the config list custom CSS box.

    select {

    font-color: white;

    background: pink;

    }

    You can change the colors to your preference.

    Let us know if I have missed something here. Thanks!

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 01:16 PM

    I see no change at all. I am on Chrome.  I don't see it in my preview or in the real version of my form.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2015 at 01:27 PM

    Hi,

    You could try cloning our forms instead and see if the changes apply there. Here's a guide on how to clone a form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Here is my form URL which you can use to clone: http://form.jotformpro.com/form/50674258580966.

    Kind regards.

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 04:09 PM

    Should I see those formatting and color changes in my preview or do I have to see it in the live form?

     

    There is something fundamental in my issues.  I have been using this form or a version of it for months and I am unable to change colors and see them.   Is there some override that is specific to myself.

    I have had such odd things happen in and around the configurable list.  

     

    This is very odd and frustrating. 

  • Profile Image
    JotForm Support

    Answered by jonathan on March 09, 2015 at 04:53 PM

    I have directly applied the custom CSS code we have suggested on your jotform http://www.jotform.us/form/50665745707160

     

    I can see it the custom color happening on the Configurable List widget on your jotform now.

    Please let us know if this still did not work.

    Thanks.

     

     

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 05:29 PM

    In both the preview and in my editable live version of the form, I see the pink, but not the drop down color changes.

     

    Very frustrating.

  • Profile Image
    JotForm Support

    Answered by jonathan on March 09, 2015 at 05:56 PM

    It was probably just a browser cache issue on your side...

    Please try clearing the browser cache and restart browser, and retry previewing the form http://www.jotform.us/form/50665745707160

    I tried at least 3x already, it was working every time

     

    Please let us know if still not working.

     

    Thank you.

     

     

  • Profile Image

    Answered by guineapigme on March 09, 2015 at 06:03 PM

    No, ... killed Chrome, restarted.  Did hard refresh for Mac

     

    shift-reload

     

    mystified

    Deborah

  • Profile Image
    JotForm Support

    Answered by jonathan on March 09, 2015 at 06:39 PM

    I understand the frustration..=) This is indeed a weird a issue.

    Have you also tried on other browsers? aside Chrome, can you also try with Firefox, Safari or IE browser.. or whichever browser you can at least test (much better if test also on another device/computer)  

    We will wait for your update.

    Thanks.