Match the styling of the dynamic dropdown field with form styling

  • Sanuker Sanofi
    Asked on March 22, 2022 at 11:01 AM

    I have a form with dropdown widget https://www.jotform.com/build/220721649488060, however, it seems not following the style of the rest of the form (font size, field height, font color), could you advise what can be done, thanks.

    Page URL: https://www.jotform.com/help/596-how-to-configure-the-dynamic-dropdown-widget/
  • Niko_N
    Replied on March 22, 2022 at 11:51 AM

    Hello Sanuker,

    Thanks for reaching out to us. That can be achieved by injecting some custom CSS codes to match the styling of the widget to the form styling. Please allow me some time to check your form and widget and provide custom CSS codes to achieve that.

  • Niko_N
    Replied on March 22, 2022 at 12:14 PM

    Thanks for your patience, Sanuker.

    As I can check, you already added some custom CSS codes to your dynamic dropdown widget. You can also copy the following CSS codes and inject them into your dynamic dropdown widget to further customize its styling (match the option sizes and colors):

    .select2-container {
    
width: 77.5% !important;
    
}
    
.select2-selection__rendered, .select2-results__options li {
    
color: #AE80FF!important;
    
}


    Please check and let us know if you need further assistance.