input placeholder 兼容性处理

Question

若要修改 <input /> 元素 placeholder 属性的样式，需要兼容多种浏览器，如下：

/* WebKit, Blink, Edge */
input::-webkit-input-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}

/* Mozilla Firefox 19+ */
.input::-moz-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}

/* Mozilla Firefox 4 to 18 */
.input:-moz-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}

/* Internet Explorer 10-11 */
.input:-ms-input-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}

设置不生效？

若设置 placeholder 的样式不生效，原因可能是在某些公共样式已经对 placeholder 进行设置了，再一次设置就会无效。解决方法是，添加 !important 增加权重。