前言
经测试与个人猜测,在微信浏览器中,<input />
标签,微信的 webview 容器应该是赋予了一些默认的属性,如标签禁用状态下 opacity
不透明度非 100% 等。
为什么有这种猜测,因为在 Chrome 调试是预期表现,而微信浏览器中则非预期结果,所以有了以上大胆的猜测,哈哈 。如有知道根本原因的,请欢迎大胆指出,谢谢。
例如,我遇到的问题,disabled
状态下只设置了 color
之后,而且输入框的背景颜色是白色,所以导致前端页面看起来就像输入框没有任何值一样。
正文
解决方案一
局部添加
.your-input { color: #ababab; text-fill-color: #ababab; opacity: 1; -webkit-text-fill-color: #ababab; -webkit-opacity: 1; }
解决方案二
全局 input 标签覆盖
input:disabled, textarea:disabled { color: #ababab; text-fill-color: #ababab; opacity: 1; -webkit-text-fill-color: #ababab; -webkit-opacity: 1; }
其中,
-webkit-text-fill-color
是用来做填充色使用的,如果有设置这个值,则color
属性将不生效。