title: Can a placeholder change its color (validate) when the field is required?
body: <p>I'm trying to make a placeholder validation effect that when a field is required, its placeholder changes its color form white to red. Please help me with this. I've tried webkits and bootstrap "control label" but its not working properly. With the control label class its working properly on firefox but not in google chrome.</p>
  
  <p>This is what i've tried </p>
  
  <p></p>
  
  <pre><code>    &lt;div class="form-group"&gt;
          &lt;input type="text" required="required" class="control-label text-fields" placeholder="Name"  /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input type="number" required="required" class="control-label text-fields" placeholder="Phone" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea class="control-label field" type="text" rows="2" placeholder="Address" required&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;textarea class="control-label field" type="text" rows="1" placeholder="Comments" required&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
  
      &lt;CSS&gt;
      ::-webkit-input-placeholder {
         color: white;
      }
  
      input:required {
          color:#red !important;
          box-shadow: none;
      }
  
      input:valid {
          color:#fff !important;
          box-shadow: none;
      }
  
      textarea:required {
          color:#red !important;
          box-shadow: none;
      }
  
      textarea:valid {
          color:#fff !important;
          box-shadow: none;
      }
  </code></pre>