Placeholder text color contact form 7

thingsviral · June 2015

Can you please tell me the custom css to change the color of the placeholder text (Your name, Your email, etc.) in the contact form 7 form.

Albert · June 2015

Hi,

please send us url to page where you got contact form and we'll tell you how to do this.

Thanks!

thingsviral · June 2015

http://www.mimaxmakeup.com

thingsviral · June 2015

specifically....

http://mimaxmakeup.com/get-in-touch/

thingsviral · June 2015

And on the same page, could you tell me what size the parallax background image should be so it doesn't cut off her face?

Thanks

Albert · June 2015

Ok. To change it's color, please use below css:

input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select, .woocommerce .quantity input.qty { color: #000 !important; }
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 { color: #000 !important; }

We do not see any parallax on this page so we don't understand what you mean exactly.

thingsviral · June 2015

This changed the input text to black, but the placeholder text "Your name" etc is still not visible because of the font color.

I changed the background to fixed because it cut off her face... I'll change it back for today.

Albert · June 2015

The css we gave you above change placeholder text so we don't understand what else you want to change. But about parallax, this is how this feature works and it is not possible to change it's behavior.

empulse · May 2016

Since the muffingroup supplied answer didn't change anything for me, I did some further digging and found the correct answer. I figured I'd leave it here in case any other Betheme users come here seeking the same answer.

::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}

compuwize · September 2016

Thank you Empulse for the answer! It helped me solve my issue.

Thierry

www.dixfractions.com

eyeconictv · December 2016

I had the same problem, but fixed it with the same looking around up until the issue continued with the :focus selector. If I add the input selector or input[type] or input[type="text"] it doesn't work. Here is all of my code for a smoothly transitioned fade on input for contact forms.

Turned out good an hour later, after digging around.

input[type="text"], 
input[type="email"]  {
   height: 50px;
   font-size: 22px;
   line-height: 26px;
   -webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
   -o-transition: all 2s ease;
   transition: all 2s ease;
}

input[type="text"]:focus, 
input[type="email"]:focus {
   box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3);
}

::placeholder { 
   color:rgba(150,150,150,0.5); 
}
::-webkit-input-placeholder { /* WebKit browsers */
   color:rgba(150,150,150,0.5) !important; 
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:rgba(150,150,150,0.5) !important; 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:rgba(150,150,150,0.5) !important; 
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:rgba(150,150,150,0.5) !important; 
}

:focus::placeholder { 
   color:rgba(100,100,100,0.25) !important; 
}
:focus::-webkit-input-placeholder {
   color:rgba(100,100,100,0.25) !important; 
}
:focus:-moz-placeholder {
   color:rgba(100,100,100,0.25) !important; 
}
:focus::-moz-placeholder { 
   color:rgba(100,100,100,0.25) !important; 
}
:focus:-ms-input-placeholder {
   color:rgba(100,100,100,0.25) !important; 
}

Placeholder text color contact form 7

Comments

This website uses cookies