近期遇到修改 input 的 disabled 状态的颜色的情况,普通的覆盖样式只在chrome下生效,Safari下的样式不生效,有人说增加 opacity:1
, 经测试依然不生效,因为还有一条隐藏的样式 -webkit-text-fill-color
Safari 的默认样式:
input:disabled {
opacity: 0.4
}
有效的样式为 :
input:disabled {
color: #000;
opacity: 1;
-webkit-text-fill-color: #000;
}
#000
为要覆盖的颜色
版本 : CSS3-webkit-text-fill-color
定义文字填充色
- 若同时设置
-webkit-text-fill-color
和 color 属性,-webkit-text-fill-color
定义的颜色将覆盖 color 定义; - 通过
-webkit-text-fill-color
属性,可以做出一些例如渐变文字和镂空文字的效果。 - 对应的脚本特性为webkitTextFillColor。
http://css.cuishifeng.cn/-webkit-text-fill-color.html
https://blog.csdn.net/ssisse/article/details/52326242