Can’t customize select menu whit css – Forminator

Hi @quentinvillanova,

Are you referring to any customization made in the form settings under the “Appearance” tab? If yes, could you please share a screenshot?

Possible to share a page URL where you have the form configured, so that we can have a better idea?

Looking forward to your response.

Best Regards,

Nithin

Hi @quentinvillanova

Thanks for response!

It seems you want to customize it a bit more than the “Appearance” setting allows so to address the dropdown with CSS you would need a bit more specific selectors.

Here is example setting colors (and rounded corners) for the drop-down list for this form:

/* dropdown container - entire list */
.forminator-select-dropdown.forminator-custom-form-14428 {
  border-radius: 20px!important;
  background-color:#FFF!important;
}

/* single options - in genera; not selected */
.forminator-select-dropdown.forminator-custom-form-14428 .select2-results__option {
  background-color:#FF0;    
}

/* single option - selected one */
.forminator-select-dropdown.forminator-custom-form-14428 .select2-results__option--selected {
  background-color:#0F0!important;
}

/* singel option - currently highlighted; coursor "over" it */
.forminator-select-dropdown.forminator-custom-form-14428 .select2-results__option--highlighted {
  background-color:#00F!important;
}

Note:

1. as you can see, in some cases I used “!important” flag; it’s not particularly elegant but seems necessary here

2. code should not be added in form’s custom CSS but in some general site’s custom CSS (e.g. via your theme’s “custom CSS” option or similar way)

3. I used quite random and a bit “nasty” colors just as example but you can surely set your own ones and also you can expand that code e.g. to set text colors or fonts, margins and so on.

I hope this help.

Best regards,
Adam