DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
::placeholder
伪元素(或在某些情况下为伪类,具体取决于浏览器实现)允许您为表单元素的占位符文本设置样式。就像使用 placeholder
属性设置的文本一样。
<input type="email" placeholder="[email protected]">
您可以使用这些零星的供应商前缀选择器在大多数浏览器中设置该文本的样式。
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
重要警告:此语法非标准,因此名称如此混乱。它根本没有出现在规范中。:placeholder-shown
是标准的,甚至规范作者也认为 ::placeholder
将成为标准化版本。
像任何伪元素一样,您可以根据需要将其范围限定到特定元素,例如
input[type="email"].big-dog::-webkit-input-placeholder {
color: orange;
}
演示
:placeholder-shown
和 ::placeholder
的区别
:placeholder-shown
用于在显示占位符文本时选择输入本身。与 ::placeholder
设置占位符文本样式相反。
这是一个图表

我发现这非常令人困惑,因为
- 规范中只有
:placeholder-shown
而没有::placeholder
:placeholder-shown
仍然可以影响占位符文本的样式,因为它是一个父元素(例如字体大小)。
请注意,:placeholder-shown
是一个伪类(它处于特定状态的元素),而 ::placeholder
是一个伪元素(一个实际上不在 DOM 中的可见事物)。可以通过单冒号和双冒号来区分。
Tab Atkins 通过电子邮件向我解释清楚了这一点。
:placeholder-shown 作为一个伪类,必须选择一个现有的元素——它在您处于显示占位符状态时选择输入。::placeholder 伪元素包装实际的占位符文本。
元素还是类?
此功能未标准化。这意味着每个浏览器对它的工作方式都有不同的想法。
Firefox 最初将此作为伪类实现,但由于一系列原因而进行了更改。长话短说,您无法使用伪类做太多事情。
例如,如果要更改输入获得焦点时文本的颜色。您将使用类似 input:focus::placeholder
的选择器,而使用伪类则无法做到这一点(它们的堆叠方式不同)。
IE10 将此作为伪类而不是元素来支持。其他所有人都实现了伪元素。
Firefox 占位符颜色
您可能会注意到,与其他浏览器相比,Firefox 中占位符的颜色看起来比较暗淡。在下图中,左侧显示的是 Firefox 43,右侧显示的是 Chrome 47。

这是因为,默认情况下,Firefox 中的所有占位符都应用了不透明度值,因此为了解决此问题,我们需要重置该值。
::-moz-placeholder {
opacity: 1;
}
您可以通过在 Firefox 中测试此演示来了解更多信息。
支持的样式
伪元素支持这些属性的样式设置。
font
属性颜色
background
属性字间距
字母间距
文本装饰
垂直对齐
文本转换
行高
文本缩进
不透明度
伪类也支持大多数(如果不是全部)这些属性,但由于上述原因,它没有那么灵活。
浏览器支持
此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
57 | 19* | 否 | 79 | 10.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 10.3 |
input{text-align:left}
::-moz-placeholder, :-moz-placeholder {text-align:right !important;}
但是“text-align:right”不起作用!
目前不支持Text-align。
您可以通过以下方式解决此问题
//我认为这样会更好
::placeholder:read{}
:placeholder:write{}
某些浏览器(已测试Firefox)对占位符使用不透明度。因此,如果您只想单独使用
color
属性控制颜色,请记住还要设置opacity: 1
。嗨,Hakan,我刚刚在 Firefox 上遇到了问题,你的评论解决了我的问题,非常感谢!
Rob
哦,我的天哪,谢谢你,Håkan!我也刚刚被这个问题难住了。
非常感谢!
3年后你拯救了我的生命,哈哈,谢谢老兄
同样重要的是,像这篇文章一样,将每个声明作为单独的声明使用,而不是像这样
谢谢;)
对不起,我想知道为什么必须将每个声明分开使用,而不是全部放在一起?
如果你把它们全部放在一起,它将不起作用。我试过了
谢谢,Ruslan!
谢谢!我为此苦恼了好几天。你治好了我的头痛。
试试这个示例
我的问题是如何在文本框中将 Safari 中的占位符文本居中对齐.. 我也在移动版和桌面浏览器上尝试过.. 它始终左对齐
如果有人知道,请告诉我
如何在此代码中将输入电子邮件表单左对齐,并将占位符右对齐
试试这个
占位符的定义
@Mohit Pilania
text-align
不被所有浏览器支持。代替
有没有人在旧版本的 Opera 中遇到过占位符右对齐的问题???
如果“text-align”不受支持,有没有办法解决此问题?
Chrome 移动版不支持 text-indent
参见此处 http://stackoverflow.com/questions/21594026/placeholder-always-align-left-in-safari
占位符 + text-indent 在 Android 浏览器 (4.2) 中不起作用,谁有解决方案?
IE 浏览器中的占位符文本问题,如何解决?
我已经使用了以下代码
:-ms-input-placeholder{color:#999;}
但它在我的 IE 浏览器中不起作用
@font-face 在 IE9 浏览器中不起作用,如何解决?
我已经将以下代码用于我的项目
@font-face{font-family:”OpenSans-Regular”; src:url(‘../new_font/OpenSans-Regular.ttf’) format(‘truetype’); src:url(‘../new_font/OpenSans-Regular.ttf?#iefix’) format(‘truetype’);}
如何在 Safari 浏览器 5.1.7 中水平居中对齐输入框水印?
这在 iOS 上的 Chrome 中似乎不起作用?
使用 CSS direction 属性将占位符内容移动到右侧。
非常感谢。
末尾的“在 Firefox 中测试此演示”链接已损坏
6 个月后它仍然坏了。
这是正确的链接: http://codepen.io/team/css-tricks/pen/36c9b95c815e9c96e31d1d28ea6f8224?editors=110
很棒的文章,继续努力。谢谢!
我需要在我的 JavaScript 中的特定位置添加此内容吗?
嗨,Chris,
看起来像是一个错别字 - 我不得不加上连字符
input[type="email"].big-dog::-webkit-input-placeholder {
color: orange;
}
此外,Codepen 链接似乎没有有效的示例。
对于询问旧版 IE 的人,您必须使用脚本而不是此 CSS。
看起来桌面版 Chrome、桌面版 Firefox、iOS Safari 和 IE10+ 现在都支持简单的
::placeholder
,不再需要前缀了。 :)请告诉我如何更改以下内容的占位符颜色
嗨,这非常有帮助,但我在 Safari 中仍然遇到占位符文本看起来“褪色”的问题。这是我拥有的内容
#ysw_search_box_id::-moz-placeholder, #ysw_search_box_id:-ms-input-placeholder, #ysw_search_box_id:-moz-placeholder {
color: #191919; opacity: 1; font-weight: bold; font-family: arial; font-size: 14px;
}
我的语法是否错误?抱歉,我不是技术人员 - 刚开始学习!!
谢谢!
当占位符的字体大小与输入字体大小不同时,占位符在 Chrome 中垂直错位(在 Firefox 中工作正常)-> https://jsfiddle.net/pmyd087f/
使用类似这样的代码。输入本身使用 25px 字体,占位符也使用,但缩放到 0.6,将为 15px。在 Safari Chrome 和 Edge 中有效 为什么在 Firefox 中不起作用?
&::placeholder {
font-size: 25px;
letter-spacing: normal;
transform: scale(0.6);
}
谁能告诉我如何在左上方对齐占位符
此页面需要更新,因为对于 Edge,您需要
::-ms-input-placeholder
(使用双冒号)谢谢,这就是我正在寻找的
太有用了!谢谢!
谢谢我的朋友……
否则声明将不起作用。查看此 示例
对我来说,我必须在所有内容前面加上“input”,否则它不起作用。
如何在 HTML 中对齐占位符而不是文本。
好的文章。也包含 Microsoft Edge 浏览器的样式。
不错。但是,是否可以从这些声明中删除元素限定符?如果不是,它们将仅应用于 input 标签,例如,textarea 标签。
我爱这个选择器,让我的输入样式更酷
哇哇哇,谢谢,这正是我需要的!非常感谢您解释 ::placeholder 和 :placeholder-shown 之间的区别!