Help with Wordpress CF7 Form CSS Styling

Web Design
#1

Attn Wordpress CSS Experts

I have used the following the CSS code snippet to change CF7 Form styling for the input field B/G color & border color.

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 textarea
{
    background-color: #e0e0e0;
	  border: 1px solid #2F2F2F;
}

The CF7 Form on the front end looks like:

Screenshot_183

However, I am struggling with the CSS code snippet for the ‘How Many People’ field. :confused:

CF7 Form Backend Form screenshot

Screenshot_184
Screenshot_1841384×419 33.4 KB

Anyone care to share the CSS line for the ‘How Many People’ field ?

Unfortunately, the CSS line below isn’t working.

.wpcf7 input[type=select],

Thanks in Advance.

#2

Seems to be this line

.wpcf7 input[type=select]

Try this

.wpcf7 select {
    background-color: #e0e0e0;
    border: 1px solid #2F2F2F;
}

so again for the drop down menu it looks like

class="form-control class:java-booking-people"

so you can be more specific by using

.wpcf7 .java-booking-people {
    background-color: #e0e0e0;
    border: 1px solid #2F2F2F;
}

should do it either way

1 Like
#3

@smurf

Issue resolved ! :slightly_smiling_face:

Screenshot_6

Thanks ! :+1:

1 Like
#4

It looks like the issue is that you’re targeting select as an input type, which it isn’t. Instead, you’ll want to directly target the select element itself. That should apply your background and border styling correctly to the “How Many People” field. Let me know if it’s still not showing as expected—there might be additional classes or specificity at play.