[Resolved] Text color Contactform7 is white on white

[Aleida]

I use Generate Press Premium, Elementor (free) and ContactForm7 and try to figure out where to adjust the textcolor for input in the contactform.

Inspection of the page reveals:
inline
element {
}

post-10.css:1
.elementor-kit-10 input:not([type=”button”]):not([type=”submit”]), .elementor-kit-10 textarea, .elementor-kit-10 .elementor-field-textual {
font-family: var( –e-global-typography-primary-font-family ), Sans-serif;
color: var( –e-global-color-primary );
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
border-style: groove;
}

inline:2
input[type=”text”], input[type=”email”], input[type=”url”], input[type=”password”], input[type=”search”], input[type=”tel”], input[type=”number”], textarea, select {
color: #455f51; *\* this color is lined through and not visible while typing. However after clicking next field the typing is visible *\*
background-color: #fafafa;
border-color: #cccccc;
}

I have tried deactivating Elementor plugin, than typing is visible, but I need this plugin.
I have used Elementor global colors enabled and disabled,
and also the customizer for colors of Generate Press,
but I think I need to know where to find inline:2, to correct the overruling of the text color: #455f51 into white (as the background is).

I hope someone can guide me to the right place.
Thanks in advance.

[David]

Hi there,

can you share a link to the site where i can see the issue ?

[Aleida]

Hi David,

Thank you for your time, I appreciate it!
You can check the issue here: https://www.guikemarijwielhandel.nl/contact/

[David]

First check in your Elementor global colors to see if they provide color option for Input fields, and change that to a new color. If thats not an option then try adding this CSS to overide it:

#page input[type="text"],
#page input[type="email"],
#page input[type="url"],
#page input[type="password"],
#page input[type="search"],
#page input[type="tel"],
#page input[type="number"],
#page textarea,
#page select {
    color: #455f51;
    background-color: #fafafa;
    border-color: #cccccc;
}

I also noticed that the Form Fields are expanding outside of their content container.
Add this CSS to fix that:

#page label {
    max-width: 100%;
}

[Aleida]

The code did the job!
And very kind of you, I didn’t notice yet the too large form fields.
Thank you David.

[David]

Glad to be of help!

[Author]

Posts