重写vue disabled后文本框字体样式

最新推荐文章于 2024-04-26 09:18:18 发布
最新推荐文章于 2024-04-26 09:18:18 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dongkai_it/article/details/73864810
本文介绍如何在Element UI框架中修改被禁用组件的颜色样式，通过在theme-base.scss文件中添加特定的SCSS代码，实现对禁用状态下的输入框、文本区域和复选框标签颜色的定制。

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

在theme-base.scss文件中添加如下样式即可
.el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner,.el-checkbox__input.is-disabled+.el-checkbox__label{
  color: #666666;
}
Vue项目中使用element-plus的el-table组件-组件使用-样式修改
JackieDYH的博客
09-18 1252
Vue项目中使用element-plus的el-table组件-组件使用-样式修改。
【前端小点】Vue3中的IP输入框组件
球球博客
01-23 1922
使用vue3写ip输入框组件
VUE3自定义组件-富文本框
qq_65142821的博客
02-28 1239
Editor.vue-- 自定义的富文本框的组件 --><template><Editor/></div>// 引入 css//定义modelValue属性// 编辑器实例，必须用 shallowRef// 内容 HTMLwatch(() => {// 记录 editor 实例，重要！// 自定义上传// TS 语法// file 即选中的文件// 自己实现上传，并得到图片 url alt href// 最后插入图片.result })});
(vue)改变element-ui原生卡片，输入框样式
nyf_unknow的博客
05-29 627
【代码】(vue)改变element-ui原生卡片，输入框样式。
Vue中改变input，textarea中使用disabled属性的字体颜色
Lj02290326gs的博客
02-25 1万+
Ps→无奈：要输就输给追求，要嫁就嫁给幸福。 前言：相信很多猿友碰到过需要禁止输入的文本框之类的业务，有两个属性可以使用。 1.redonly属性，字体颜色默认黑色，但是没有精致输入的标志，鼠标仍然可以点击到文本框内，体验感不好。 2.disabled属性，字体颜色默认为浅灰色，有明显的鼠标禁止输入标志，但是在光线强的情况下很难看清楚内容是什么。 此文就是鄙人自己做个记录，修改disabled属...
基于Vue的输入框智能提示组件
12-29
用Vue实现在用户输入的向后台请求候选项，支持键盘的上下选择以及Enter确认选择。做了控制请求次数的优化！注释十分详细后台返回的数据是自己模拟的，拿过去就可以使用！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
elementPlus el-form中组件非表单组件disable状态
weixin_45890414的博客
08-15 1148
【代码】elementPlus el-form中组件非表单组件disable状态。
vue_t_v14
l1029455098的博客
03-21 2946
vue
2-2.vue+axios+element-ui实现修改操作
落叶的博客
03-03 1951
Vue与Axios结合进行交互 这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.youkuaiyun.com/weixin_43913219/article/details/104296020 在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。 安装a...
vue笔记总结
qq_44417271的博客
02-01 1650
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
基于vue2.0的input输入框文字特效
12-10
这是一款基于vue2.0的input输入框文字特效。该input输入框特效在输入框聚焦时，为输入框添加多种动画效果，极大提高交互效果。
el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
启猿泰坦的博客
05-17 995
【代码】el-input标签不同type的disabled样式调整（禁用,but要正常显示文字）
element+vue 修改disabled样式
新手必备
07-07 976
【代码】element+vue 修改input/textarea中disabled样式。
修改el-input disabled状态下的字体颜色,vue修改子组件中的el-inputdisabled状态下的placeholder字体颜色
pleaseprintf的博客
03-10 5814
修改el-input disabled状态下的字体颜色,vue修改子组件中的el-inputdisabled状态下的placeholder字体颜色。
ant-design-vue 修改ant-input disabled样式（原先样式他们觉得太深了，把字体原色改明显了，背景色改浅了）
今日最可爱YeahT
05-08 9822
在src目录下新建一个common.less文件，在main.js里面引入这个文件 common.less覆盖原先的样式 /*覆盖ant-design-vue 样式**/ .ant-input[disabled] { color: rgba(0, 0, 0, 0.6); background-color: #f9f9f9; } .ant-select-disabled...
全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
热门推荐
qq_25007459的专栏
10-31 2万+
1、下载所需要的字体，.ttf格式本文以（PingFang.ttf 为例） 底下将会附加苹果方体-简易黑体PINGFANG MEDIUM.tff 可自行下载其他字体样式，全局引用，方便快捷。 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'PingFang'; //重命名字体名 s...
disabled状态下placeholder提示信息隐藏与textarea文本显示-input-ElementUI
gaogzhen的博客
04-25 3654
disabled状态下placeholder提示信息隐藏与textarea文本显示-input-ElementUI   在实际项目开发中，对于表格内容添加、修改、查看往往会共用同一个组件-对话框，通过一个标志来区分。在查看时，对于表单中输入框，我们希望只能查看不能修改，这是使用disabled属性，那么问题来了： 问题 disabled转态下我们希望隐藏placeholder提示信息 textarea文本能正常显示 解决 通过属性控制disabled值与placeholder的值 修改样式：
修改el-textarea内容的文字样式
Apple23233的博客
04-26 1019
【代码】修改el-textarea内容的文字样式。
vue开发，如何简单快速修改vant组件的内部样式
西瓜优快云的博客
11-30 3049
简单快速修改vant组件的内部样式
vue项目的文本框透明样式
最新发布
03-02
### 设置 Vue 项目中文本框透明样式的 CSS 方法 对于文本框透明样式的设置，可以利用 CSS 来调整 `input` 元素的背景颜色和其他视觉属性。下面是一个简单的例子来展示如何创建一个具有透明背景的文本框。 #### HTML 结构 在 Vue 组件中定义模板部分： ```html <template> <div id="app"> <!-- 定义带有特定类名的 input 输入框 --> <input type="text" v-model="message" class="transparent-input"/> </div> </template> ``` #### 样式设计 接着，在 `<style>` 部分加入自定义样式以应用到上述输入框上： ```css <style scoped> .transparent-input { /* 调整边框为无 */ border: none; /* 设定字体大小 */ font-size: 1em; /* 将背景设为完全透明 */ background-color: transparent; /* 可选：如果想要保留下划线效果 */ border-bottom: 1px solid rgba(0, 0, 0, .4); /* 圆角处理 (可根据需求修改)*/ border-radius: 4px; /* 当获得焦点时不显示默认轮廓 */ outline: none; /* 添加一些内边距让文本看起来更好看 */ padding: 8px; } </style> ``` 此段代码实现了文本框的透明化，并保持了一定程度上的美观度[^1]。 #### JavaScript 数据绑定 为了让这个文本框能够正常工作并与 Vue 实例交互，还需要确保已经设置了相应的 data 属性和事件监听器： ```javascript <script> export default { name: 'App', data() { return { message: '' } }, }; </script> ``` 这样就完成了一个基本的透明文本框组件的设计。可以根据实际应用场景进一步定制其他样式特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值