2

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>
user2265685
  • 27
  • 1
  • 3
  • 9

2 Answers2

3

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.

Community
  • 1
  • 1
Dre
  • 2,933
  • 2
  • 18
  • 21
  • 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. – user2265685 Apr 16 '13 at 13:00
  • 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 Apr 16 '13 at 13:10
  • 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. – Dre Apr 16 '13 at 13:15
  • still doesn't seem to change anything. – user2265685 Apr 16 '13 at 14:14
  • Working for me; which browser are you using? – Dre Apr 16 '13 at 14:21
  • 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. – user2265685 Apr 16 '13 at 14:36
  • 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 Apr 16 '13 at 14:49
  • Try the [ID Developer Centre](http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx) and also this article on [CSS-Tricks](http://css-tricks.com/snippets/css/style-placeholder-text/) – Dre Apr 16 '13 at 15:28
  • Thank you so much for this. Please note there is a missing open bracket in :-ms-input-placeholder. – David Rhoden Feb 27 '14 at 15:38
  • Or maybe that's on purpose. What are the colons before the selectors for? – David Rhoden Feb 27 '14 at 15:45
0

::-webkit-input-placeholder { /* WebKit browsers */

color: #000 !important;

opacity: 1;

}

Monyane Ramollo
  • 15
  • 3