select dropdown container

Hi @mausoftware,

I hope you are doing well today!

You can try adding the following CSS code to your WP Dashboard->Appearance->Customize->Additional CSS section.

/* Change dropdown open container height*/
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options{
     max-height:260px !important; 
}

/* Change dropdown open container background and border color*/
.forminator-select.forminator-select-dropdown-container--open * {
    background: red !important;
    border-color: white !important;
}

Kind regards,
Zafer

Hi Zafer @wpmudevsupport15
thanks
1) OK
2) background should change only selected item ;
setting as above, it takes red on full container

Hi @mausoftware,

2) background should change only selected item ;
setting as above, it takes red on full container

Could you please try the following CSS & see if that helps?

.forminator-select-dropdown-container--open .forminator-custom-form-11726.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option.select2-results__option--selected, .forminator-select-dropdown-container--open .forminator-custom-form-11726.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) {
	background: red !important;
}

You can add the CSS via the customizer as instructed before.

Kind Regards,

Nithin

Hi, seems OK with your code.
but, what means ‘11726’ selector item?
if I make several forms, above code should work only all of its?

Hello @mausoftware,

I hope things are going well for you.

but, what means ‘11726’ selector item?

This is a form ID. Each form has a unique ID, which you can copy from the shortcode or get it from the address bar when you edit the form.

if I make several forms, above code should work only all of its?

You can apply the same CSS code by simply duplicating it and changing the form ID to match the specific form you wish to style. Additionally, feel free to select different colours for that particular form as well.

I hope this information will be helpful to you.

–
Thanks & Kind Regards,
Imran Khan

Hi @wpmudev-support9
so far, I could also divide in 2 part CSS custom code (in case re-use)
and duplicate just the final part (-11726) with different form ID
am I right?

.forminator-select-dropdown-container–open
.select2-results .select2-results__options
.select2-results__option.select2-results__option–selected,
.forminator-select-dropdown-container–open
.select2-results .select2-results__options
.select2-results__option.select2-results__option–selected
span:not(.forminator-checkbox-box)
{ background: red !important; }

.forminator-custom-form-11726.forminator-dropdown–default
.forminator-custom-form-11726.forminator-dropdown–default
{ background: red !important; }

Hi @mausoftware,

divide in 2 part CSS custom code (in case re-use)
and duplicate just the final part (-11726) with different form ID

You can either use the forminator-custom-form class to target for all forms or use forminator-custom-form-11726 where 11726 would be the form ID to target specific forms.

Regards,

Nithin

understand, so do not need to use twice
.forminator-custom-form-11726.forminator-dropdown–default
but only once
.forminator-custom-form

Hello @mausoftware,

I hope things are going well for you. I am sorry for the delay here.

Kindly try the second CSS and see how it goes. If it work well on the multiple form. Keep it otherwise you may have to use separate CSS as per the form.

Thanks & Kind Regards,
Imran Khan

Hello @mausoftware,

I hope the above suggestions helped.

We haven’t heard back from you for some time, so I’m marking this thread as resolved. Please feel free to reopen it and reply if you need our further assistance.

Best Regards,
Dmytro