使用 Css 样式化 HTML5 表单输入占位符答案

【问题标题】：Styling HTML5 Form Input Placeholder with Css使用 Css 样式化 HTML5 表单输入占位符
【发布时间】：2013-03-19 17:52:18
【问题描述】：

我有你的基本输入和占位符。我将占位符文本颜色设为浅灰色。但是，当我在输入中单击并键入内容时，颜色保持不变。有没有一种方法可以在输入内容和未输入内容时更改文本的颜色？

<input type="text" placeholder="Your Name">

【问题讨论】：

标签： html forms placeholder

【解决方案1】：

不幸的是，目前还没有涵盖所有浏览器的本地方式来做到这一点。但是，您可以使用供应商特定的 css 规则，如 jsfiddle 所示。

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

【讨论】：

感谢您的意见。欣赏它。 jQuery 会是最好的解决方案吗？
这取决于支持旧版本 Firefox 和 IE 的重要性。如果它很重要，那么是的，你可以使用一个现代化的类和一个小的 jQuery 函数来用你自己的样式伪造一个。使用谷歌上的任何解决方案 - 似乎每个人和他们的狗都制作了一个 jQuery 占位符插件。如果您只支持最新版本的浏览器，那么像上面这样的供应商特定 css 规则就可以了。
太棒了！感谢您抽出时间提供帮助。