html 更改特定字段的占位符颜色

Posted 2021-05-10

https://jsfiddle.net/Sk8erPeter/KyVXK/

HTML

<h1>Changing HTML5 <a href="http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-placeholder-attribute">placeholder</a> color with CSS</h1>

<p>Source: <a href="http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741">http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741</a> (big thanks to toscho)</p>

<form action="#" method="post">
    <div>
      <label for="name">Text Input:</label>
      <input type="text" placeholder="Your name" name="name" id="name" value="" tabindex="1" />
    </div>

    <div>
      <label for="name_2">Text Input 2:</label>
      <input type="text" placeholder="Your name" name="name_2" id="name_2" value="" tabindex="1" />
    </div>  
  
    <div>
      <label for="textarea">Textarea:</label>
      <textarea placeholder="Some text" cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

  <div>
      <label for="textarea">Textarea 2:</label>
      <textarea placeholder="Some text" cols="40" rows="8" name="textarea_2" id="textarea_2"></textarea>
    </div>

  
    <div>
      <input type="submit" value="Submit" />
    </div>
</form>





<style>
::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder {
    color:    #999;
}
::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

/* Different color for some fields */

#name_2::-webkit-input-placeholder,
#textarea_2::-webkit-input-placeholder
{
  color:    #FF0000;
}

#name_2:-moz-placeholder,
#textarea_2:-moz-placeholder 
{
  color:    #FF0000;
}

#name_2::-moz-placeholder,
#textarea_2::-moz-placeholder 
{
  color:    #FF0000;
}

#name_2:-ms-input-placeholder,
#textarea_2:-ms-input-placeholder 
{
  color:    #FF0000;
}

</style>