该死的兼容性

input placeholder 兼容性处理

2020-12-28  本文已影响0人  越前君

若要修改 <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 增加权重。

上一篇 下一篇

猜你喜欢

热点阅读