Hi @rvcz
I hope you’re well today and thank you for contacting us!
Yes, this happens sometimes due to conflicting CSS on site. Usually it’s some part of theme’s CSS overriding Forminator’s one but it may also be coming from one of the other plugins.
In general, sometimes theme or plugins has a bit “strict” CSS that tries to “force” forms to use certain look and that breaks native form CSS.
To fix it try adding this CSS to the site (preferably via some “custom CSS” option of the theme/page builder rather than custom CSS of the form itself):
/** Fix dropdown z-index **/
.forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select{
z-index: initial;
}
/** Dropdown list **/
.forminator-select-dropdown .select2-results__option--selected,
.forminator-select-dropdown li:hover{
background: red;
color: #fff;
}
Note:
1. If you are using different “Design Style” for the form (see its “Appearance” settings) than “Default”, you will need to replace “default” with that style name in this line
.forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select{
For example, if you are using “Flat” style, this line should be
.forminator-ui.forminator-custom-form[data-design=flat] select.forminator-select2+.forminator-select{
2. Here you can change background color and font color of the list item that’s being currently highlighted (the “hover” effect):
background: red;
color: #fff;
3. After adding the code to the site, you may need to clear all cache to make it work.
If this doesn’t solve the issue, we’ll need to take a closer look at the form so in such case, please share a link to the page with the form on your site so we could check it.
Will take a look and come up with alternative CSS to fix it.
Best regards,
Adam
