CODEWITHSUNDEEP
htmlcsswordpresscontact-form-7
jdyagoda
jdyagoda

Reputation: 47

Contact Form 7 Style different for "Select" field than other fields

I have a basic contact form 7 on my site that works fine. I just tried to add a Select field to the form though, and the style of the field is different than the rest. It's white and opaque vs. dark and transparent. I'd like to edit the style of the Select field to be more like the rest of the form, so I'm trying to find what the default style is for the rest of the form so I can copy it.

enter image description here

Is the default style determined by my theme? If so, how can I find it?

Does the Select field look different for some other reason not style-related? I added it in exactly the same as I did all other fields, with no extra styling whatsoever in the theme, custom CSS, or additional settings areas.

Here's the form code in CF7:

[text* title placeholder "First Name*"] 
[text* last-name placeholder "Last Name*"] 
[email* email-text placeholder "Your Email*"]
[tel* phone-number-code placeholder "Phone Number"]
[textarea commentquestion 4x10 placeholder "How Can We Help You?"]
[select how-did-you-hear "How did you hear about us?" "YouTube" "Google" "Facebook" "Referred by someone" "Other"]

[submit "Send"]

Thank you!

Upvotes: 1

Views: 3667

Answers (1)

m4n0
m4n0

Reputation: 32285

The current dark styles are being applied from slider-form but it does not include the custom styles for the select element, which is being applied by the theme by default.

You can target the select element of the specific form using the following

#wpcf7-f8-p6635-o1 select.wpcf7-form-control.wpcf7-select {
    background: rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.5);
}

Additionally, If you want to style the option elements

#wpcf7-f8-p6635-o1 select.wpcf7-form-control.wpcf7-select option {
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.75);
}

Output:

enter image description here

Upvotes: 1

Related Questions