title: default browser css not being overwritten
body: <p>I have started a new site (<a href="http://energyamplified.co.za/home.php" rel="nofollow">http://energyamplified.co.za/home.php</a>) and for the life of me I cannot figure this out, I am attempting to overwrite the browsers (webkit and moz currently in testing) default values for the placeholder text. I have tried setting the type of the text, using !important (which I never want to do) in order to overwrite the DarkGray default of the browser, using external sites to test the CSS, it works fine - I cannot figure this out.</p>
  
  <p>THE HTML Code:</p>
  
  <pre><code>                &lt;header&gt;
                      &lt;h1&gt;Contact Us&lt;/h1&gt;
                  &lt;/header&gt;
                  &lt;div id="contact_email"&gt;&lt;a href="mailto:info@energyamplified.co.za"&gt;info@energyamplified.co.za&lt;/a&gt;&lt;/div&gt;
                   &lt;div id="contact_wrapper"&gt;
                   &lt;form method="post" name="contactform" id="contactform"&gt;   
  
                  &lt;fieldset&gt;
                  &lt;div id="form_left"&gt;
                  &lt;p&gt;&lt;label for="name" accesskey="U"&gt;&lt;span class="required"&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;input name="name" type="text" id="name" size="50" value="" placeholder="Name"/&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="email" accesskey="E"&gt;&lt;span class="required"&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;input name="email" type="text" id="email" size="50" value=""  placeholder="Email"/&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="phone" accesskey="P"&gt;&lt;span class="optional"&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;input name="phone" type="text" id="phone" size="50" value=""  placeholder="Phone (optional)"/&gt;&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div id="form_right"&gt;
                  &lt;p&gt;&lt;label for="comments" accesskey="C"&gt;&lt;span class="required"&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;textarea name="comments"  rows="8" cols="40"  id="comments" style="width: 450px;" placeholder="Type message here..."&gt;&lt;/textarea&gt;&lt;/p&gt; 
  
                  &lt;div id="bot"&gt;&lt;p&gt;&lt;span class="required"&gt;*&lt;/span&gt; Are you a bot?&lt;/p&gt;&lt;/div&gt; 
                  &lt;div id="spam"&gt;
                  &lt;div id="spam_2"&gt;
                  &lt;label for="verify" accesskey="V"&gt;&lt;img src="image.php" alt="" /&gt;&lt;/label&gt;
                  &lt;input name="verify" type="text" id="verify" size="5"/&gt;&lt;/div&gt;
                  &lt;input type="submit" class="submit" id="submit" value="Submit" /&gt;
                  &lt;/div&gt;
                  &lt;/fieldset&gt;
                  &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>::-webkit-input-placeholder { /* Chrome */
  color: #000;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #000;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #000;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    #000;
  }
  
  [type="text"] {
      -moz-appearance:    textfield;
      -webkit-appearance: textfield;
      appearance: textfield;
  }
  </code></pre>