如何在所有浏览器中设置占位符属性的样式？ [复制]答案

【问题标题】：How to style placeholder attribute across all browsers? [duplicate]如何在所有浏览器中设置占位符属性的样式？ [复制]
【发布时间】：2013-01-21 14:31:01
【问题描述】：

我有一个像 <input type="text" placeholder="lorem ipsum"> 这样的元素。

如何在 CSS 中设置 thisplaceholder 属性的样式，使其适用于所有浏览器？

【问题讨论】：

您的意思是您想知道如何设置占位符文本的样式？
为什么是“自定义”？该属性在 HTML5 中定义
Placeholder 是一个 HTML5 表单属性，除 IE 外，所有现代浏览器都支持该属性。 w3schools.com/html/html5_form_attributes.asp
已经有一个[关于这个的话题][1]。 [1]：stackoverflow.com/questions/2610497/…
@Sjoerd：我觉得这个更适合stackoverflow.com/questions/2610497/… ;)

标签： css html

【解决方案1】：

输入中的占位符文本（在目前实现它的浏览器中）为浅灰色。要设置它的样式，您需要供应商前缀 CSS 属性。

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

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

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

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

您也可以检查这个非常相似的问题：

Change an HTML5 input's placeholder color with CSS

【讨论】：