input 的 placeholder 样式

 ::placeholder 伪元素

这个伪元素可以改变 input、textarea 占位文本的样式。

input::placeholder {
    color: green;
}

完整的兼容性写法：

input {
  &::-webkit-input-placeholder, /* WebKit browsers*/ 
  &:-moz-input-placeholder, /* Mozilla Firefox 4 to 18*/
  &::-moz-input-placeholder, /* Mozilla Firefox 19+*/ 
  &:-ms-input-placeholder /* Internet Explorer 10+*/
  {
    color: green;
  }
}

在 Chrome 控制台调试 placeholder 样式

默认情况下，Chrome 控制台是看不到 input 的 placeholder 的样式的，可以在控制台的设置里面把这个配置勾上就行了：

现在就能看到 placeholder 伪元素和其上的样式了：