84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
Chrome v4 支持 input[type=text] 元素上的占位符属性（其他可能也这样做）。
input[type=text]
但是，以下 CSS 不会对占位符的值执行任何操作：
input[placeholder], [placeholder], *[placeholder] { color: red !important; }
值仍将保留grey，而不是red。
值
grey
red
有办法改变占位符文本的颜色吗？
/* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; }
这将为所有input和textarea占位符设置样式。
input
textarea
重要说明：不要对这些规则进行分组。相反，为每个选择器制定单独的规则（组中一个无效的选择器会使整个组无效）。
共有三种不同的实现：伪元素、伪类和无。
::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
::placeholder
Internet Explorer 9 及更低版本根本不支持placeholder属性，而Opera 12 及更低版本不支持任何占位符的 CSS 选择器。
placeholder
关于最佳实施方案的讨论仍在继续。请注意，伪元素的行为就像阴影中的真实元素一样DOM。input上的padding将不会获得与伪元素相同的背景颜色。
padding
用户代理需要忽略具有未知选择器的规则。请参阅选择器级别 3：
因此我们需要为每个浏览器制定单独的规则。否则整个组将被所有浏览器忽略。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; }
/* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; }这将为所有
input和textarea占位符设置样式。重要说明：不要对这些规则进行分组。相反，为每个选择器制定单独的规则（组中一个无效的选择器会使整个组无效）。
实施
共有三种不同的实现：伪元素、伪类和无。
::-webkit-input-placeholder。[参考]:-moz-placeholder（一个冒号）。[参考]::-moz-placeholder，但旧的选择器仍将工作一段时间。[参考]:-ms-input-placeholder。[参考]::placeholder[Ref]Internet Explorer 9 及更低版本根本不支持
placeholder属性，而Opera 12 及更低版本不支持任何占位符的 CSS 选择器。关于最佳实施方案的讨论仍在继续。请注意，伪元素的行为就像阴影中的真实元素一样DOM。
input上的padding将不会获得与伪元素相同的背景颜色。CSS 选择器
用户代理需要忽略具有未知选择器的规则。请参阅选择器级别 3：
因此我们需要为每个浏览器制定单独的规则。否则整个组将被所有浏览器忽略。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; }