CSS: Styling dropdown element

  • henryclarke10
    Asked on May 19, 2025 at 2:47 PM

    Hi, I need some help styling the "Please Select" dropdown on my form. I would like it to match the other fields, so the same font, font size, font color, padding and width ideally. Screenshot and link to form attached.

    Thanks very much!

    Jotform Thread 27143531 Screenshot
  • Podo: Support AI Agent
    Replied on May 19, 2025 at 2:47 PM

    Hi Steve,

    Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

    To style the "Please Select" dropdown to match your other fields, you can adjust the font, font size, font color, padding, and width using the Form Designer or custom CSS in your form settings.

    Here’s how to do it:

    1. Open your form in the Form Builder.
    2. Go to the Form Designer (paint roller icon).
    3. Under the Styles tab, adjust the font, font size, and color to match your other fields.
    4. For padding and width, you may need to add custom CSS: Go to Settings > Form Designer > CSS tab, then add CSS targeting your dropdown element to set padding and width.
    5. Save your changes and preview the form to confirm the styling matches.

    If you provide the form link or more details, I can assist with the exact CSS code.

    Give it a try and let us know how it goes.

  • Jessica JotForm Support
    Replied on May 19, 2025 at 9:25 PM

    Hi Steve,

    Thanks for reaching out to Jotform Support. We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

    We appreciate your patience and understanding in this.

  • Jessica JotForm Support
    Replied on May 20, 2025 at 8:31 AM

    Hi Steve,

    Adding the following code will style the Dropdown element to look similar with the other field:

    1. First, copy this code:

    /* Styling Dropdown element - Ticket #27143531 */
    select#input_16 {
     width: 286px !important;
     padding: 16px !important;
     box-shadow: 0 1px 2px #eee inset !important;
     color: #777777 !important;
     font-family: 'Lato' !important;
     font-size: 18px !important;
    }
    /* Ends here */

    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.

    CSS: Styling dropdown element Image 1 Screenshot 30

    Here is what it will look like once the code is added:

    CSS: Styling dropdown element Image 2 Screenshot 41

    Give it a try and let us know if you need more help.

Your Reply