Archived topic
Text color Contactform7 is white on white
5 replies · Started by Aleida on June 9, 2021
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.
Hi there,
can you share a link to the site where i can see the issue ?
Hi David,
Thank you for your time, I appreciate it!
You can check the issue here: https://www.guikemarijwielhandel.nl/contact/
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%;
}The code did the job!
And very kind of you, I didn't notice yet the too large form fields.
Thank you David.
Glad to be of help!
