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

  • Profile Image
    johnspring
    Asked 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

  • Profile Image
    cicektuna
    Answered 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
    Irshad
    Answered 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
    johnspring
    Answered on September 30, 2016 at 11:04 AM

    Thanks

  • Profile Image
    Irshad
    Answered 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.