contact form 7 watermark font colour

Question

I Can't seem to get my contact 7 watermark to work, I upgraded the version and now the css I had on before doesn't change the watermarks to black, also the font is different on the name and address box.

website =
goo.gl/BIWD3

Here is my code to add the watermark and then change it in the css which was previously working.

.wpcf7 .watermark {
color: black !important;
font-family: arial !important;
}

<div class="bottom-form">

<p style="text=align:left; font-weight:normal; font-family:arial;">
[textarea textarea-251 placeholder "Name and Address"]</p>
<p style="text-align:left;  font-weight:normal;">
 [text telephone placeholder "Telephone"]
</p>
<p style="text-align:left; font-weight:normal">
[text dateandtime placeholder "Date & Time"]
</p>
</div>

Solution

My guess is that the updated plugin now supports the HTML5 placeholder attribute. Try adding the placeholder selectors alongside your existing .watermark selectors. There's a bunch of them as they all have vendor prefixes; check out this SO post for more details.

.wpcf7 .watermark {
    color: black !important;
    font-family:'arial', sans-serif;
}
::-webkit-input-placeholder {
    color: black !important;
    font-family:'arial', sans-serif;
}
:-moz-placeholder {
    color: black !important;
    font-family:'arial', sans-serif;
}
::-moz-placeholder {
    color: black !important;
    font-family:'arial', sans-serif;
}
:-ms-input-placeholder {
    color: black !important;
    font-family:'arial', sans-serif;
}

Link to JSFiddle: http://jsfiddle.net/fHgae/

I just tried this on May 6, 2016 using Visual Composer and copying and pasting this code onto a page with contact 7 form and it worked great. Click on the gear icon when editing using the front end of Visual Composer. There was a bracket missing in the original code when I copied and pasted which was weird but I manually typed it in and no problem. Placeholder text went from gray to black as it was supposed to.

Comments

[user2265685]

I tried this but it still doesn't seem to pick it up, In the inspect element I can't see any css class's for the watermark.

[Dre]

My bad; the different placeholder selectors need to be listed separately, otherwise they're not recognised. Also you can't have the preceding selector before them. I'll edit the example above

[Dre]

Edited the code above to separate the rules; if a group of selectors contains an invalid selector, the browser will ignore the whole group. Tested and works in Safari.

[user2265685]

still doesn't seem to change anything.

[Dre]

Working for me; which browser are you using?

[user2265685]

oh I'm using chrome, I need to change the font to arial and it doesn't seem to work in the big text-area.

[Dre]

Looks like you didn't add the font-family to the selectors as well; sorry, I should have made that clearer. I've edited the example above, and added a JS Fiddle

[Dre]

Try the ID Developer Centre and also this article on CSS-Tricks

[David Rhoden]

Thank you so much for this. Please note there is a missing open bracket in :-ms-input-placeholder.

[David Rhoden]

Or maybe that's on purpose. What are the colons before the selectors for?