can't style HTML form input Placeholder text

Question

I have Wordpress plugin Contact Form 7 output the form:

   form.mhm-contact-form-green input::-webkit-input-placeholder, form.mhm-contact-form-green input:-moz-placeholder, form.mhm-contact-form-green input::-moz-placeholder, form.mhm-contact-form-green input:-ms-input-placeholder {color: #FFF;}

<form action="/#wpcf7-f93-p66-o1" method="post" class="wpcf7-form mhm-contact-form-green" novalidate>
      <p><span class="wpcf7-form-control-wrap first-name">
        <input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="FIRST NAME">
        </span></p>
      <p><span class="wpcf7-form-control-wrap last-name">
        <input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="LAST NAME">
        </span></p>
      <p><span class="wpcf7-form-control-wrap your">
        <input type="text" name="your" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="PHONE NUMBER">
        </span></p>
      <p><span class="wpcf7-form-control-wrap your-email">
        <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="YOUR EMAIL">
        </span></p>
      <p><span class="wpcf7-form-control-wrap location">
        <select name="location" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
          <option value="Perth">Perth</option>
          <option value="Melbourne">Melbourne</option>
          <option value="Adelaide">Adelaide</option>
        </select>
        </span></p>
      <p><span class="wpcf7-form-control-wrap Product">
        <select name="Product" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
          <option value="pool renovation">pool renovation</option>
          <option value="pool resurfacing">pool resurfacing</option>
          <option value="pool tiling">pool tiling</option>
          <option value="fully tiled pools">fully tiled pools</option>
        </select>
        </span></p>
      <p class="fullwidth"><span class="wpcf7-form-control-wrap your-subject">
        <input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="YOUR SUBJECT">
        </span></p>
      <p class="fullwidth"><span class="wpcf7-form-control-wrap your-message">
        <textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="YOUR MESSAGE"></textarea>
        </span></p>
      <p class="fullwidth" align="right">
        <input type="submit" value="Enquire Now" class="wpcf7-form-control wpcf7-submit">
        <span class="ajax-loader"></span></p>
      <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>

However, the placeholder text is not displaying as white on this page (half way down, just below the two tilers in yellow shirts).

I've tried removing input from the CSS selector:

form.mhm-contact-form-green::-webkit-input-placeholder, form.mhm-contact-form-green:-moz-placeholder, form.mhm-contact-form-green::-moz-placeholder, form.mhm-contact-form-green:-ms-input-placeholder {color: #FFF;}

but this still does not work.

I need to style two different forms with different classes differently. How do I select placeholder text based on the form's class?

Help appreciated.

Possible duplicate of [CSS styling placeholder text](http://stackoverflow.com/questions/14431818/css-styling-placeholder-text) — roberrrt-s, Dec 19 '16 at 09:02

score 0 · Answer 1 · answered Dec 19 '16 at 07:09

0

Change the placeholder class in the stylesheet without the other selectors. Tested in Chrome and Firefox. Working. :

-webkit-input-placeholder {
   color: white;
}

-moz-placeholder { /* Firefox 18- */
   color: white;  
}

-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

-ms-input-placeholder {  
   color: white;  
}

answered Dec 19 '16 at 07:09

Emmanuel N K

8,710
1
31
37

Thanks. I need to specify different colours for different form classes though. – Steve Dec 19 '16 at 07:55
i don't see any difference between the code for ff18 and ff19. why the distinction? – szaman Jul 01 '17 at 15:33

can't style HTML form input Placeholder text

1 Answers1