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

今天在开发的时候突然发现在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;
  }
}

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值