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


目录
相关文章
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
浏览器的兼容性问题
浏览器的兼容性问题。
47 4
|
4月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
100 1
 H5微信外支付(移动端浏览器)
|
9月前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
341 5
|
4月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
94 1
|
5月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
5月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
6月前
|
XML 小程序 JavaScript
|
6月前
|
小程序 JavaScript 索引
|
6月前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!

热门文章

最新文章