修改 input 的 disabled 状态的颜色

近期遇到修改 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-colorcolor 属性,-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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。