MailChimp Dropdown Styling

[elcrasto]

Hi,

I’m trying to style the Drop Down menu for a Mailchimp form.

I found this thread, which was very helpful in styling all fields apart from the Drop Down ‘Country’ selection menu.

Can you help with the correct id/class I need to call?

Also, would you know how I style the actual drop down to be a different color?

[friech]

Hi Martin,

Thank you for writing in, that site on the other thread is using a 3rd party plugin. Regretfully, we can not provide support for 3rd party plugins. However, if you could provide us your site URL where we can see your Dropdown menu we might able to give you a tip on how to style that dropdown.

Cheers!

[elcrasto]

www.stayyounginside.com
password - young

This page is really work in progress, also whilst you here, I can’t figure out how to change the pages in the top nav?
Thank you,
Martin

[friech]

Hi Martin,

You can use this selector to style the dropdown on your form.

.tco-subscribe-form select {
	background-color: #f6f6f6;
	border-radius: 50px;
}

The menu can be configure under Appearances > Menus

WordPress Menu User Guide

Hope it helps,
Cheers!

[elcrasto]

Thank you!

Once thing I have noticed, even though in the Email Form set up in X - labels is turned off - Country is still there?

Is this a bug in the X Email Form?

[christian]

Hey Martin,

I checked the code responsible for outputting the dropdown and it looks correct. I’m not sure why it’s passing the condition and outputs the group title. Would you mind removing the group title from Mailchimp.

If that doesn’t work, this would temporarily need custom CSS.

Here’s the CSS that targets the select element of the third fieldset which is your dropdown and moves the select element up covering the label. Add this in Theme Options > CSS

.tco-subscribe-form fieldset:nth-child(5) select {
    margin-top: -26px;
}

If you’re going to add fields, you will need to change the nth-child value which is currently 5.

Thanks.

[elcrasto]

Hi,
Thank you so much, that code works for now. I don’t have any groups set up in Mailchimp?

Also how come the Emails Forms is bringing – Select Country – preset state for the drop down, is there a way to change this? I would obviously do it in the form’s html code, but with this being short code I’m struggling.

[Prasant]

Hello Martin,

Thanks for updating the thread.

If you would like to hide the element then please add following CSS under Pro > Theme Options > CSS:

.tco-subscribe-form fieldset:nth-child(3) {display: none;}

Thanks.