Dropdown style doesn’t change

Hi @noxerr,

I tried replicating this on my end but changing the font for Select and Dropdown didn’t affect other elements on my end.
Could you share an URL where this form can be seen on your end?

Can you also provide us with export of your form so we can have a look at your setup.
You can go to Forminator > Forms page, click on Gear icon to get the export file.
Upload it to any file sharing service like GDrive or Dropbox and share the download link here.

As for the CSS, if you are adding it directly to your form settings that Forminator adds some its default classes to CSS selector so that could be why you’re not seeing it applied.
You can try using less specific selector or use your CSS in Appearance > Customizer instead of directly in the form.

Cheers,
Predrag

“You can try using less specific selector or use your CSS in Appearance > Customizer instead of directly in the form” -> If I do that nothing happens, font size won’t change

“I tried replicating this on my end but changing the font for Select and Dropdown didn’t affect other elements on my end.” –> if I set the button “custom” for fonts all of them will use robot instead of the one I have in my theme

.forminator-select-dropdown-container--open .forminator-custom-form-3457.forminator-dropdown--material .select2-results .select2-results__options .select2-results__option{
    font-size: 26px;
}

this does nothing, it doesn’t even load in the html style

Hi @noxerr,

I tried adding the following CSS on a test form at my end and it worked as expected:

`span#select2-select-1-field-container {
font-size: 26px;
}`

Can you please give it a try at your end?

As we have already mentioned, we weren’t able to replicate the issue – changing the font for Select and Dropdown affecting other elements. Wouldn’t you mind, please share us with an export of your form as we have already requested so that we can take a closer look at your setup.

Reff: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

You can use Pastebin to share the export file or Google Drive or DropBox as suggested earlier.

Kind Regards,
Nebu John

• This reply was modified 3 years, 6 months ago by Nebu John - WPMU DEV Support.

The code you provided changes the size of the element containing the dropdown, but not the text size of the dropdown elements. This is, when I click on the arrow for the dropdown to appear, the text is always 16 unless I set custom text size and then all the fonts are messed up.

https://pastebin.com/1Kq4QHTa

Hello @noxerr ,

Can you check this CSS:

.forminator-select-dropdown-container--open .forminator-custom-form-76.forminator-dropdown--material .select2-results .select2-results__options .select2-results__option {
	   font-size: 26px !important; 
}

But use in Apparanece -> Customize -> Custom CSS.

kind regards,
Kasia

Hi @noxerr

I hope you are doing well and safe!

We haven’t heard from you in a while, I’ll mark this thread as resolved.

Feel free to let us know if you have any additional question or problem.

Best Regards
Patrick Freitas

I’ve tried it but it doesn’t work

Hi @noxerr

Thank you for update!

The pastebin that you shared has already expired and you also didn’t share URL of yoru site so I can’t check your form and site but there are two things that struck me in this case:

1. You mentioned that the moment you change “Font” from “Use Theme Fonts” to “Custom” in form settings, all the fields start to use Roboto font.

This is true because Roboto is the “default font of the material style” as in built-in Formiantor styles. If Font option is set to “Use Theme Fonts”, forminator doesn’t apply its CSS rules that define fonts so “automatically” theme fonts are applied. If you switch – then some font must anyway be set by default so you could further customize it. So yes, you do need to make selections for all the available form elements (all the “font” options in form settings) that you want to use fonts different than Roboto.

2. But you have also mentioned that when trying to use CSS, that custom CSS is not even “loaded in HTML”. If you check stylesheets/page source/or inspect relevant elements in browser – you cannot see that custom CSS anywhere, right?

This suggests that there’s actually something else involved: most likely there’s either some sort of cache (it might be some caching plugin, server-side cache, CDN cache or any combination) and/or the original styles are “stuck” in some “optimized CSS”.

Are you using any caching/optimization plugins on site and/or cache on server? If yes, have you tried to clear all the caches and temporarily disable any CSS optimization plugins/tools just to see if the code gets applied?

Kind regards,
Adam