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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 更改特定字段的占位符颜色相关的知识,希望对你有一定的参考价值。


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>

以上是关于html 更改特定字段的占位符颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何更改特定输入字段的占位符颜色?

仅更改输入占位符 * 颜色

如何在角材料中使用 css 更改 md-input-container 占位符颜色?

使用 jquery 更改占位符文本字体和颜色

使用 CSS 更改 HTML5 输入的占位符颜色

如何使用swift 2.0更改UITextfield占位符颜色和fontsize?