uni-app uni-easyinput输入框disabled样式不对

uni-app uni-easyinput输入框disabled样式不对

示例代码：

官方uni-easyinput示例demo

操作步骤：

官方uni-easyinput示例demo

预期结果：

输入框disabled后灰色背景

实际结果：

白色背景

bug描述：

下载官方uni-easyinput示例demo测出来的

图片

示例图片

信息 描述
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 WIN11
HBuilderX类型 正式
HBuilderX版本 4.76
浏览器平台 Chrome
浏览器版本 140.0.7339.80
项目创建方式 HBuilderX

更多关于uni-app uni-easyinput输入框disabled样式不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

官方给的示例我测试 1.1.18 版本 disabled 有灰色背景，你的 uni-easyinput 组件是最新版本的吗？

更多关于uni-app uni-easyinput输入框disabled样式不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你用vue2测下

我用的是vue2，编辑器和示例都是刚下载的，还是一样，没有禁用背景


vue2 也没有复现

你们自己下最新的示例项目测试吧，反正我自己测出来每背景色，我同事电脑也一样，都是这个页面导入的示例项目https://ext.dcloud.net.cn/plugin?name=uni-easyinput，选的vue2

没人管了是吗，子元素的背景色写死了，导致父容器动态的is-disabled失效，自己下载案例测试吧，把用本地的组件测试了


你把你测试的代码发到评论区

回复 DCloud_UNI_JBB: 代码是你们官方的，我一个字没改，代码这个组件的示例项目

感谢反馈， 最新版本已修改

我就问一句，我不坚持提问你们就不改是吗，你们压根就没看我的说明，还让我贴代码

这么明显的bug也没人提，你们的产品到底是有多少人在用，有时候我都在想，bug关我鸟事，反正我自己也能定位问题自己修

这是一个已知的uni-easyinput组件在H5平台下的样式兼容性问题。当设置disabled属性时，组件的背景色未正确应用禁用状态的灰色样式。

问题原因： uni-easyinput组件在disabled状态下，部分CSS样式可能被浏览器默认样式覆盖，特别是在H5平台下表现不一致。

临时解决方案： 在App.vue或页面样式中添加以下CSS代码：

.uni-easyinput__content.is-disabled {
  background-color: #f5f7fa !important;
  opacity: 1;
}

或者针对特定输入框添加自定义类名：

.custom-disabled .uni-easyinput__content.is-disabled {
  background-color: #f5f7fa !important;
}
回到顶部