Styling Contact Form 7

trex888 · October 2016

Hi there,

I've used Firebug and Chrome's Inspection tool but can not find the css that controls elements within Contact Form 7 fields. The Colors/Forms section within the admin doesn't work as I'm using a One Color Skin. I'm trying to change 2 things through css:

1) The text color of characters that are inputted within each field (currently blue by default but want the text to be green).

2) One of the contact form fields is a dropdown. The hover color of the dropdown is currently blue, I'd like it to be green.

Here's a link to the form: click here

Any help with this would be greatly appreciated,

T

Albert · October 2016

Hi,

did you tried to use color options under Theme options > Colors > Forms section?

trex888 · October 2016

Yes, as indicated in my original message, I've tried that and it doesn't work. Because I'm using the One Color Skin, that Colors/Forms section does not work. I need to add Custom CSS but can not locate css that I need to change using Firebug.

Albert · October 2016

Ok. So to change those colors, please use:

input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #FFF !important;
}
.wpcf7-form select { background: #000 !important; color: #FFF !important; }

Of course we get above css using Firebug.

trex888 · October 2016

Thank you very much.

Albert · October 2016

You are welcome

trex888 · October 2016

Ok so everything to do with the form is now styled accordingly but one thing, the dropdown hover color. I've used Firebug, I've used Chromes Inspection but can not find where the blue dropdown hover color is coming from. Please, can you provide the css to change this one color from blue to something else? The field I'm referring to is titled: First Timer or Regular

Here's a link to the form

Thanks for any further help with this,

T

Albert · November 2016

If you mean select item, this hover color came from browser and our theme does not have anything to do with this color.

Styling Contact Form 7

Comments