Drop down menu on forms has transparent background
-
Need some help.
I use forms on my site where customers can get quotes. Recently I’ve noticed that when the drop down arrow is used on a form, there is no background. It’s transparent, and so the choices get mingled with whatever is below them in the form, and it becomes extremely difficult to read anything.
Get A Quote | Eco Rubbish Clearance
Can anyone suggest a reason and a solution?
kind regards,
Simon
The blog I need help with is: (visible only to logged in users)
-
Hello Simon,
I see what you mean!
It looks like there’s a conflict between the theme’s CSS and CSS generated by Jetpack.
This CSS should overwrite the two:
/* FIX change form dropdown background AL FR */ .contact-form .contact-form-dropdown__menu ul.ui-menu { background-color: white; }This can be added via Appearance > Customize > Additional CSS.
I hope this helps.
-
-
-
-
Hello, everyone
I am having the same issue. The problem is I am on the Personal Plan, so I cannot use the CSS suggested. Please help.
-
Hello @english2plus
Thanks for reaching out – what is the URL of the site you’re experiencing this on?
-
-
Hey there,
Thank you for that.
It looks like this form is using the classic block? The reason why I ask is because if converted to a form block, it’s possible to set the field background colour.
Many thanks in advance.
-
Hi, Leone
Yes, I am using the classic block. I have tried to convert it into blocks, but where should I insert the CSS?
This is the block result.
[contact-form to="(email visible only to moderators and staff)" subject="Form Order"][contact-field label="Nama lengkap" type="name" required="1"][contact-field label="Email" type="text" required="1"][contact-field label="WA (sertakan +62…)" type="text" required="1"][contact-field label="Layanan" type="select" required="1" options="Program Grammar,Program Persiapan TOEFL & IELTS,Program Mentoring Beasiswa,Jasa Proofread (Bahasa Inggris),Jasa Proofread (Native Speakers),Jasa Proofread (Bahasa Indonesia),Jasa Translate,Jasa Translate (Legal),Jasa Cover Letter; Resume; & CV"][contact-field label="Pesan" type="text"][contact-field label="Institusi" type="text"][/contact-form]
-
Hi there!
So what @aleone89 suggested was using a Form block (instead of using the form inside the Classic block) and then using the Form block’s background color options. Using that way, you wouldn’t need to use any CSS.
Could you perhaps insert a Form block on a page (could be a temporary test page on your site) and share the link with us? We can take a look.
Thanks!
-
Hi, @aisajib
Thank you for your explanation.
I have managed to use the Form block. However, I don’t have an option to put the title for the form created. So in my test, after I filled out the form, I received an email entitled “A new registration from your website“, instead of “Form Order” I used to have.
Any solution to this? -
-
Same is happening to us — all our dropdowns on forms are transparent. Tried the code below in Additional CSS and it didn’t work. Help with this–we use these forms all the time.
/* FIX change form dropdown background AL FR */ .contact-form .contact-form-dropdown__menu ul.ui-menu { background-color: white; }
-
Hi @teenturn
Could you please create a separate thread with the link to your site so that we don’t send unnecessary notifications to the posters above? Note that you also have access to live chat support, so feel free to choose the live chat option here to get faster support with your site. :)
- The topic ‘Drop down menu on forms has transparent background’ is closed to new replies.
WordPress.com Forums 