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

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

前言


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


目录
打赏
0
0
0
0
6
分享
相关文章
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
95 5
|
4月前
浏览器的兼容性问题
浏览器的兼容性问题。
51 4
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
352 5
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `&lt;label&gt;` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
75 13
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
100 1
|
5月前
|
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
256 0
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等