微信浏览器中 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 属性将不生效。


目录
相关文章
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
3654 1
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
11月前
|
前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
514 77
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
982 5
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
844 1
 H5微信外支付(移动端浏览器)
浏览器的兼容性问题
浏览器的兼容性问题。
236 4
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
437 2
|
XML 小程序 JavaScript
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!