Dropdown width and color

  • ppmral
    Asked on July 1, 2025 at 7:28 AM

    How do I match the dropdown width and colors as the other fields?

    https://share.zight.com/bLu24kJP

  • Talat
    Replied on July 1, 2025 at 8:25 AM

    Hi Brook,

    If you only want to adjust the width, you can hover over the form field, click the Properties panel on the right, and set the width from the Options tab in the menu that opens.

    Dropdown width and color Image 1 Screenshot 40

    If you want to customize the appearance further—such as adjusting colors along with the width—you can do this in the Advanced Form Designer.

    To open the Advanced Form Designer:

    • Open the Form Builder.
    • Click the Form Designer at the top right.

    Dropdown width and color Image 2 Screenshot 51

    • In the panel that opens on the right, scroll down and click Advanced Designer to open the advanced editor.

    Dropdown width and color Image 3 Screenshot 62

  • ppmral
    Replied on July 1, 2025 at 2:33 PM

    I don't see teh Fix option - https://share.zight.com/4guv6WYo

  • ppmral
    Replied on July 1, 2025 at 2:37 PM

    Also, the drop down is so thin compared to the others.

  • Shane JotForm Support
    Replied on July 1, 2025 at 3:46 PM

    Hi Brook,

    Thanks for reaching out to Jotform Support. To fix the styling of your form's dropdown element, you can use Custom CSS code. Here's how:

    1. First, copy this code:

    /* 28522831 - Update dropdown width and height */
    #cid_13, [data-type="control_dropdown"] .form-dropdown {
    max-width: 100% !important;
    }

    [data-type="control_dropdown"] .form-dropdown {
    height: 40px !important;
    }
    /* End */

     2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    Dropdown width and color Image 1 Screenshot 30 We also have a guide about How to Inject Custom CSS Codes that you can check out. See following screenshot for the expected result:

    Dropdown width and color Image 2 Screenshot 41
    Give it a try and let us know how it goes.

  • ppmral
    Replied on July 4, 2025 at 3:10 AM

    Perfect, thank you!