兼容性

placeholder 属性是 css3 中新增加的属性，IE9 和 Opera12 以下版本的 CSS 选择器均不支持占位文本。

修改 placeholder 默认的字体、颜色和大小

方式 1：因为每个浏览器的 CSS 选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写 input 和 textarea)。

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}

方式 2：（建议使用该方式）如果是在手机客户端 webview 只使用 webkit 内核方式即可。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}

[notice]个人直接用了方式 2，测试可用。其中的 textarea 可以根据需要选择是否去除，最好在 input 前加上一些详细层级，而不是应用到全局。[/notice]

参考 ：css3 placeholder字体颜色大小

文章目录