Dynamic Dropdown Widget: How to match its styling with the rest of the form?

  • CairoFlats
    Asked on June 30, 2021 at 11:08 PM

    Hello JF,

    I like the dynamic dropdown widget but it does not automatically suit the colour that the rest of the form has taken and stands out badly. How do I inject some css to change the colour and opacity of this box in order to make it fit in with the rest of the form?

  • Zahra_S
    Replied on July 1, 2021 at 6:13 AM

    Hi there,

    I checked your forms and couldn't locate the dynamic dropdown widget in any of your forms. Please share the form link and a screenshot of the field you want to customize. We will gladly assist you.

    Kindly share the screenshot by following this guide as email attachments are not supported on our forum: https://www.jotform.com/help/438-how-to-post-screenshots-to-our-support-forum.

  • CairoFlats
    Replied on July 1, 2021 at 7:40 PM

    I have attached a photo which shows the difference between a normal dropdown box accepting the whole form colour Vs the dynamic dropdown which defaults to white with no way to change it other than CSS. Any assistance is greatly appreciated.

    1625182802 60de52521dc5f Screen Shot 202 Screenshot 10


  • Zahra_S
    Replied on July 2, 2021 at 3:19 AM

    Hi there,

    To write CSS for this, we need that specific field's ID which can only be possible if you have added this field in your form. Please share your form link in which you have added this field so we could share CSS specifically for your form.

    Waiting for your response.

  • CairoFlats
    Replied on July 2, 2021 at 10:40 PM

    Hello Zahra,


    Here is the link that you have requested. Your prompt assistance is greatly appreciated.

    https://form.jotform.com/211828503707859



  • Zahra_S
    Replied on July 3, 2021 at 1:49 AM

    Thank you for sharing this.

    Please allow me some time to work on this. I will get back to you soon.

  • Zahra_S
    Replied on July 3, 2021 at 2:38 AM

    Please add the following CSS code in the widget:

    .selecter .selecter-selected{
    background-color: #F5F3EE !important;}
    .selecter:hover .selecter-selected{
    background-color: #F5F3EE !important;}
    .selecter .selecter-item{
    background-color: #F5F3EE !important;}


    Result:

    1625294008 60e004b83532c ddw color Screenshot 10

    Complete Guide: How to Inject CSS Codes to Widgets

    Here's the form I cloned for testing: https://form.jotform.com/211831481400949. Feel free to test it on your end.

    I hope this helps. Please let us know if you need further assistance.

  • CairoFlats
    Replied on July 5, 2021 at 8:40 PM

    Hi Zahra,

    Thank you for this code. It works great and is a huge improvement to my form.


    Kind regards,

    Elliot.