uni-app easyinput 修改disabled时的样式

最新推荐文章于 2025-06-24 10:29:45 发布

freefly828

最新推荐文章于 2025-06-24 10:29:45 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app java 服务器

本文链接：https://blog.csdn.net/freefly828/article/details/133094035

文章讨论了在使用uni-easyinputdisabled属性使表单处于只读状态时，内容字体过淡的问题。作者提供了在<style>中添加特定CSS样式的解决方案，以强制设置为黑色以提高可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在表单只读的状态下，<uni-easyinput disabled=true>时，内容字体太淡。一般的方法不可行，最终可行的解决方案是在<style>添加如下样式：

::v-deep .is-disabled {
	color: black !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

freefly828

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp自定义tab切换css样式、uni-forms中input下拉等标签字体、过宽、溢出样式一系列调整(附加实战举例)

可可的博客

10-30

682

uniapp自定义tab切换css样式、uni-forms中input下拉等标签字体、过宽、溢出样式一系列调整(附加实战举例)

uni-app 问题总结

qq_36158551的博客

03-12

2915

在开发中，我们经常会遇到需要禁用input框的情况，但是禁用后无法添加点击事件的问题。

1 条评论您还未登录，请先登录后发表或查看评论

uniapp在nvue页面修改uni-easyinput组件字体样式

qq_52266802的博客

06-12

781

uni-easyinput组件在nvue页面兼容性不是很好，建议直接去修改组件源码中的样式。

【Uniapp】uni-easyinput组件修改在禁用（disabled）情况下的默认样式

学无止境

06-09

3279

【代码】【Uniapp】uni-easyinput组件修改在禁用（disabled）情况下的默认样式。

解决uniapp u-input设置disabled/readonly点击事件失效问题

qq_45651201的博客

06-24

497

解决u-input组件设置disabled/readonly属性后点击事件失效的问题，可通过在外层添加view容器并设置pointer-events:none样式。该方法让鼠标事件穿透input元素，触发外层view的点击事件。MDN解释pointer-events:none会使元素不成为鼠标事件目标，事件会穿透到下层元素，从而保留交互功能的同时实现输入框的只读效果。（约120字）

修改uni-easyinput禁用（disabled）后的默认样式

weixin_47526134的博客

03-09

4938

/deep/ .is-disabled { background-color: #ffffff !important; color: #0d0d0d !important; }

uniapp小程序踩坑input样式问题

limuu09的博客

04-29

1705

问题：cursor设置正常展示，但是设置placeholder时使用官方文档提供的属性会有问题。解决：直接使用类名，注意style不要加scoped，新写一个，如果还不成功就用深度选择器。操作前样式没修改成功，但是输了内容删除之后样式立即生效。需求：需要给input的placeholder及光标设置特定样式。

【uniapp】 uni-ui组件 uni-easyinput 字体大小与输入大小修改（不改源码）其他很多组件也可以参考这个方法

学习只为当小狗狗，学习只为当小狗狗，学习只为当小狗狗，学习只为当小狗狗，学习只为当小狗狗，学习只为当小狗狗，学习只为当小狗狗

11-16

888

一个好用的vue3方法，vite+vue3+uniapp+ts+scss。可以使用css3的子类选择器控制他们的样式。

如何在uniapp框架中自己的页面中修改uni-easyinput或其它的扩展组件的宽高。

qq_52879298的博客

11-18

3432

高的话，先在组件源码中找到控制当前组件显示宽高的样式类名，然后在自己当前页面设置其演示即可，注意使用/deep/,比如uni-easyinput组件里控制显示的样式是uni-easyinput__content-input。哈哈哈宽简单，可以给这个组件外面套一层view，给view设置宽去挤压uni-easyinput的宽度。我页面上的组件宽高就生效了。目前我是在微信开发工具上测的，希望能帮到你。

uni-easyinput disabled后placeholder字体颜色怎么改

09-13

uni-easyinput是基于小程序生态的一个富文本输入组件，当`disabled`属性设置为`true`后，组件通常会有禁用状态，包括提示文字的颜色会默认变为灰色或深色以示不可操作。如果你想改变这种状态下placeholder的字体颜色...

uni-easyinput 只读

最新发布

06-26

这是一个关于uni-app框架中uni-easyinput组件的问题。回顾系统级指令：-所有行内数学表达式必须使用$...$格式。-独立公式使用$$...$$。-LaTeX语法正确。-使用中文回答。-生成相关问题。-回答中引用的段落末尾添加...

通过disabled和readonly将input设置为只读效果

12-14

有两种方式可以实现input的只读效果：disabled 和 readonly。自然两种出来的效果都是只能读取不能编辑，可是两者有很大不同。 Disabled说明该input无效，及其value不会传递给任何程序，比如asp、php等。 Readonly仅仅是无法编辑，不影响其值的传递。 Disabled使用：<INPUT type="text" name="username" value="james" disabled> Readonly使用：<INPUT type="text" name="partNumber" value="1500" readonly>

uniapp代码组件的总结

qq_36981190的博客

04-14

6179

这里写目录标题内置组件内置组件 view 视图容器属性说明 1、hover - class 指定按下去的样式类，与class类似，当hover-class = “none”时，没有点击状态效果。 2、hover-stop-propagation 默认值false，指定是否阻止本节点的祖先节点出现点击状态。当给父子级都设置了hover-class,你会发现竟然还是冒泡的，为阻止冒泡，就需要用到hover-stop-propagation属性 3、hover-start-time 按住后多久出现点击状态

关于UNIAPP环境下对自带组件的样式修改

qq_43012085的博客

07-28

6697

关于UNIAPP环境下对自带组件的样式修改

设置uni-easyinput中textarea类型的高度

weixin_43337481的博客

07-12

3839

uni-easyinput__content-textarea样式中的高度默认是80，以下是原样式。在自己的页面样式中做出修改。

Easyui中input标签设置只读

weixin_44889014的博客

04-17

3082

Easyui中input标签设置只读直接在input标签中设置属性： readonly=“readonly”

uniapp input 如何禁用输入但只读？

weixin_42220130的博客

01-15

6095

disabled默认为false，修改为true即可禁用输入。