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

HTML5引入了一个名为占位符的新属性。<input>和<textarea>元素上的此属性向用户提示可以在字段中输入的内容。

这是显示占位符的示例。电子邮件提示，即email@example.com是此处的占位符：

示例

您可以尝试运行以下代码来学习如何使用占位符 属性：

<!DOCTYPE HTML>
<html>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
         <input type="submit" value="submit" />
      </form>
   </body>  
</html>

示例

要更改输入的占位符颜色，请使用CSS。

<!DOCTYPE HTML>
<html>
   <style>
      ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:   #7F0D10;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #7F0D10;
        opacity:  1;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:   #7F0D10;
        opacity:  1;
      }
   </style>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
         <input type="submit" value="submit" />
      </form>
   </body>
</html>

基础教程