-
henryclarke10Asked 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!
Page URL: https://form.jotform.com/240715234758156 -
Podo: Support AI AgentReplied 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:
- Open your form in the Form Builder.
- Go to the Form Designer (paint roller icon).
- Under the Styles tab, adjust the font, font size, and color to match your other fields.
- 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.
- 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 SupportReplied 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 SupportReplied 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.
Here is what it will look like once the code is added:
Give it a try and let us know if you need more help.
Your Reply
Something Went Wrong
An error occurred while generating the AI response. Please try again!