美文网首页该死的兼容性
微信浏览器中 Input 标签 CSS 兼容性问题

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

作者: 越前君 | 来源:发表于2020-10-26 16:49 被阅读0次

经测试与个人猜测,在微信浏览器中,<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:diabled {
  color: #ababab;
  text-fill-color: #ababab;
  opacity: 1;
  -webkit-text-fill-color: #ababab;
  -webkit-opacity: 1;
}

其中,-webkit-text-fill-color 是用来做填充色使用的,如果有设置这个值,则 color 属性将不生效。

相关文章

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

    经测试与个人猜测,在微信浏览器中, 标签,微信的 webview 容器应该是赋予了一些默认的属性,如标签禁用状态...

  • 浏览器兼容性问题及解决方案(JS部分)

    关于浏览器兼容性问题的姊妹篇《浏览器兼容性问题及解决方案(CSS部分)》请点击这里。 常见的JS兼容性部分的问题有...

  • 4个技巧避免不必要的浏览器兼容性问题

    浏览器兼容性问题着实让人头疼,从最初的IE6浏览器到现在HTML5+CSS3的兴起,依然会存在兼容性问题,这里分享...

  • 前端开发常见的兼容性问题及解决方案

    IE兼容性标签写法: webkit浏览器中input获得焦点后,自动产生黄色边框 解决方法:给input增加样式 ...

  • 前端面试2

    1.媒体查询2.兼容性问题(1)不同浏览器的标签默认的外补丁和内补丁不同解决方案:CSS里 *{margin...

  • css元素选择符

    1 通配符(*) css2 兼容浏览器版本 注: 示例 2 标签(类型)选择符(Element) css1 兼容浏...

  • 浏览器兼容性问题

    关于浏览器的兼容性问题和css hsck 五大主流浏览器包括: chorme (webkit) safari (w...

  • 微信小程序兼容性问题

    本文我们来谈谈微信小程序系统兼容性的那些坑。 微信小程序兼容性问题 微信小程序发布一周多了,兼容性问题,特别是 A...

  • Hack技术

    CSS Hack来解决浏览器局部的兼容性问题,hack主要针对IE浏览器常见的有三种形式:css属性Hack,cs...

  • day26 js基础2

    微软(ie)兼容性问题。js、html、css浏览器翻译浏览器分为高级、低级浏览器高级:火狐、谷歌、ie8以后低级...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/bhaamktx.html