微信浏览器中 Input 标签 CSS 兼容性问题

[toFrankie]

经测试与个人猜测，在微信浏览器中，<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 属性将不生效。