無法設置HTML表單輸入占位符文本的樣式

Question

我有Wordpress插件聯系表格7輸出表格：

  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> 

但是， 此頁面上的占位符文本未顯示為白色（一半向下，正好在兩個穿着黃色襯衫的瓷磚下面）。

我試着從CSS選擇器中刪除input ：

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;}

但這仍然行不通。

我需要為具有不同類的兩種不同形式設置不同的樣式。 如何根據表單的類別選擇占位符文本？

幫助表示贊賞。

Answer 1

在不使用其他選擇器的情況下更改樣式表中的占位符類。 在Chrome和Firefox中進行了測試。 工作。 ：

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

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

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

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