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 there a way via CSS to set the colour of each Dropdown option?

    Asked by iannel on December 27, 2014 at 09:57 AM

    Hi there, is there a way via CSS to set the colour of each Dropdown option in a column? So Option 1=Blue, Option 2=Red etc. I am using this setup:

    Name of group : dropdown : Group_1, Group_2, Group_3 : Please Select



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    colour select dropdown option Configurable List option colors option colours color hover color mouseover color radio group colors
  • Profile Image
    JotForm Support

    Answered by abajan on December 27, 2014 at 03:45 PM

    Thanks for asking. This can be done as follows:

    1. With the jotform loaded into the form builder, go into the widget's wizard:

    2. Scroll down to the Custom CSS section and add the following code:

    option {
     color: #FFF;
    }

    option:nth-child(2) {
     background: blue;
    }

    option:nth-child(3) {
     background: red;
    }

    option:nth-child(4) {
     background: green;
    }



    3. Close the wizard and save the jotform

    When done, the options in your form's Configurable List dropdowns should be like those in this demo.

    If there are more than three options in any of the widget's dropdowns, you would add a rule for each additional one. For instance, if there was a fourth option in the demo whose background color I wanted to be purple, I would add the following rule:

    option:nth-child(5) {
     background: purple;
    }

    Hexadecimal color values (like the #FFF used in the first rule) would also work.

    If you need further assistance with this, we'd be happy to provide it.


    Thanks

  • Profile Image

    Answered by iannel on December 28, 2014 at 04:03 AM

    Thank you - that works perfectly! What would the CSS code be to change the background selection from the blue color to say a light-grey, as one of my colors is the same color as the background when you hover over the list, and hence it could be confusing. Would just like to change the hover background color.

  • Profile Image

    Answered by iannel on December 28, 2014 at 06:00 AM

    Hi there, I have another problem with this widget: just using the above dropdown, the options in the dropdown do not appear as conditional choices, nor do they return their values when the form is submitted. The idea is for the person to select the person in a dropdown, and based on that, a condition is set up to email the selected person. With the standard dropdown field, the value is available to perform a conditional action on, but not this widget - in fact, the field available is the main title - default "Configurable List" and not the actual drop-down field. So in summary, my dropdown could be: Please select the correct group : dropdown : Group 01, Group 02 : Please Select - but the conditional rules only allow you to select the TITLE of this widget and thus does not see "Please select the correct group" as the actual field, and cannot find the values "Group 01" Group 02" etc.

    Is there some other code that will use the dropdown title as the field instead of the Widget title?

    Many thanks for your assistance thus far!

     

  • Profile Image

    Answered by iannel on December 28, 2014 at 06:22 AM

    Hi there - I found that using the "Contains" condition it works. I also hard-coded the field in the email and it works now - thank you. Would still be grateful for any assistance with the hover background color CSS setup.

  • Profile Image
    JotForm Support

    Answered by abajan on December 28, 2014 at 10:27 AM

    Hi Ian,

    Once the size attribute of a dropdown (select) is set to more than "1", it's possible to set the hover background color with a rule like

    option:hover {
     background:#EFEFEF;
    }

    In the form builder, the size attribute of a regular dropdown can be changed via the Visible Options button:

    However, there's no way to change the number of visible options of dropdowns in the Configurable List widget. And even if there was a way to do it, my tests have indicated that once a background color is applied to an option, the hover color doesn't show. Moreover, it's not possible to change via CSS the default blue background and white foreground colors on selected options because those colors are system-wide settings:


    So, unless there's a particular reason to use the Configurable List widget, it would probably be better to use a radio group,

    as illustrated in this demo. Conditions can be set on such fields in the same manner as dropdowns. (In the demo I've replaced the email conditions with Show/Hide ones just for demonstration purposes.) The only disadvantage is that it occupies more vertical space than a dropdown.

    Would this work for your purposes?

  • Profile Image

    Answered by iannel on December 28, 2014 at 11:20 AM

    Hi there

    Everything else works with the form I have set up, so I guess I can live with the background hover color, it's perfect thanks - and thank you for the fantastic support you have provided!

    Kind regards

    Ian

  • Profile Image

    Answered by Shadae on December 28, 2014 at 12:57 PM

    Hi Ian,

    On behalf of my colleague you are most welcome. We are happy that we could assist you with getting your desired results.

    Please feel free to contact us if you need further assistance.

    Thank you.