Placeholder text color contact form 7

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.

Comments

  • Hi,

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

    Thanks!

  • 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
  • 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.
  • 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.
  • 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.
  • 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;
    }
  • edited September 2016
    Thank you Empulse for the answer! It helped me solve my issue.

    Thierry
  • edited 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;
    }
Sign In or Register to comment.