为什么在Firefox里placeholder的颜色比设置的代码浅，比其他浏览器浅

最新推荐文章于 2022-09-27 11:45:56 发布

Cassy_Wu

最新推荐文章于 2022-09-27 11:45:56 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/Cassy_Wu/article/details/68554555

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天在开发的时候突然发现在Firefox下设置的placeholder颜色不是代码设置的颜色。本着码农朴实的精神，我先检查下是不是写错了。毕竟各大浏览器都坚持以自我为中心，其他为goushi的精神。坚持要苦逼的前端写不同兼容的代码。但是不管姑奶奶我怎么改，代码是生效了，颜色是改了。就是取色器取出来的不是宝宝设置的颜色呀（此处一脸懵逼）。心里好气，可是还是要保持微笑。这TM怎么过测试啊。终于在各种搜索词变换下。。。。发现。

Firefox placeholder有一个默认的设置opacity：0.4；

所以对于这种无耻却似乎很有道理的行为，我们只能

好了，废话说够了。解决方案拿去吧

input::-webkit-input-placeholder,//chorme, safari
input:-moz-placeholder,  //Firefox V18及以下
input::-moz-placeholder, //Firefox 19
input:-ms-input-placeholder  { //IE 10
    color #757575;
}
    
input:-moz-placeholder,
input::-moz-placeholder {
    opacity: 1;
}

外附上scss mixin写法。 Ctrl C + Ctrl V

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

input {
  @include placeholder {
    color: #757575;
  }
}