无法设置HTML表单输入占位符文本

时间:2016-12-19 07:00:32

标签: html css

我有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>

但是,占位符文字在this page上没有显示为白色(中间一半,就在黄色衬衫的两个瓷砖下面)。

我尝试从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;}

但这仍然不起作用。

我需要以不同的方式设置不同类别的两种不同形式。如何根据表单的类选择占位符文本?

帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

更改样式表中的占位符类而不使用其他选择器。在Chrome和Firefox中测试过。工作。 :

.csv