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

    How to get different colors of every option in dropdown menu?

    Asked by johnspring on September 30, 2016 at 04:20 AM

    Hi

    Is it possible to have different colors within same dropdown menu or different fonts (one line red another white)?

     

    Regards

    Anzej

    different in same OR another
  • Profile Image

    Answered by cicektuna on September 30, 2016 at 05:46 AM

    Hello,

    You can inject extra CSS codes from "Design" Menu after learning the id of the dropbox.

    First you can learn the dropbox menu's id like that :

    1. Right click to the dropbox choose "Edit Properties"

    2. Choose "Advanced" menu

    3. Click "Field Details"

    Then you can see there is Field IDs label.

    After you can open "Design" menu in "Form Builder" and open "Inject CSS"

    There you can write Css background color codes to your dropbox according to its fields IDs.

    For example : 

    #input_3{

    background-color : blue;

    }

    Hope that helps.

    Thanks,

  • Profile Image

    Answered by Irshad on September 30, 2016 at 10:39 AM

    If you want to change the background color of drop-down list, then please try to inject the below css code:

    .form-dropdown{

        background-color: blue;

    }

    It is also possible to keep different color of every option inside the drop-down list like the below screenshot:

    For achieving that, try to inject the below css code:

     

    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: red;

    }

    option:nth-child(7) {

    background: blue;

    }

     

    option:nth-child(8) {

    background: red;

    }

     

    option:nth-child(9) {

    background: green;

    }

     

    option:nth-child(10) {

    background: purple;

    }

     

    option:nth-child(11) {

    background: red;

    }

    You can also verify it on my clone form here:

    http://jotform.com/62733916781969

     

    If you have any query, or need further assistance, feel free to revert back.

    Thanks.

  • Profile Image

    Answered by johnspring on September 30, 2016 at 11:04 AM

    Thanks

  • Profile Image

    Answered by Irshad on September 30, 2016 at 12:21 PM

    You are most welcome. If you face any issue, feel free to contact us. And we will be glad to assist you.

    Thanks.