修改el单选框被禁用时选中的颜色

已于 2023-05-29 17:00:02 修改
阅读量1.3k 收藏
点赞数 1
文章标签： css html vue.js
于 2023-05-08 14:55:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48179363/article/details/130559112
版权

/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner {

    background-color: #409EFF;

    // border-color: #E4E7ED;

}

//禁用时字体颜色

/deep/.el-input.is-disabled .el-input__inner {

    border-color: #E4E7ED;

    color: #606A76;

}

✔Suyer.
关注
单选框部分选项禁用情况
sy_yan的博客
07-23 1301
element-ui 中 select 选项 部分按钮 需要显示 但是不想让用户使用 即禁用 利用：disabled属性 可以对数据进行处理 将需要禁用的选项 增加一个disabled属性为true <template #rebateCode="scope"> <el-select v-model="form.rebateCode" filterable class="w-100" clearable @change="selectOptions" placeholder="请选
【ElementUI】el-table中复选框禁用处理
前端知识分享喵
09-20 6219
el-table中复选框禁用处理
vue elementUI更改Checkbox 多选框禁用状态下文本颜色
weixin_45561965的博客
09-09 534
最近在做vue项目中，根据需求要改变CheckBox禁用状态下的文本颜色，原因是默认的文本颜色太浅，要自定义颜色。
element-select disabled只读后修改css字体颜色不生效
qq_34234337的博客
06-27 1589
【element-select disabled只读后修改css字体颜色不生效】 今天想做一个动态改变select框字体颜色发现修改不了，原来是select使用disabled，它使用的优先级比color更高的-webkit-text-fill-color，导致怎么设置颜色都无效。重新设置一下-webkit-text-fill-color即可，因为是局部使用的所以加了class（special-color）
elemnet UI table 根据 数据状态，禁用 多选框 并 改变背景颜色
灰太郎
10-23 696
element表格如下 <el-table :row-class-name="tableRowClassName" ref="pageTable" row-key="oid" :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55" reserve-selection :selectable="selectEvent"> </el-table-colu.
vue element ui 修改 el-checkbox的禁用状态下的颜色
骨子里的偏爱
03-28 3221
vue element ui 修改 el-checkbox的禁用状态下的颜色
【Element】自定义修改el-select的禁用框样式
IU
12-01 2320
使用stylus写的，自行修改格式. /deep/.el-input.is-disabled .el-input__inner background-color #5f5f61 !important border-color #373a43 color #C0C4CC cursor not-allowed
Element UI非活性时（Disabled），改变字体颜色
捷锐CSDN专栏
11-24 3703
Element UI组件在非活性时（Disabled)，字体颜色太淡，显示不清楚，加上以下样式，就可以改变字体颜色了。
el-table-column 怎么做成单选框，全选框禁用
最新发布
10-23
在 Vue 的 Element UI 中，`el-table-column` 是表格列组件，如果你想在其中添加单选框并实现全选功能，并且需要禁用全选按钮，你可以这样做： 1. 首先，在 `el-table-column` 的定义里，你可以添加一个模板元素 `...
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若...
el-table中echeckBox实现单选,以及控制工具栏是否禁用；
飞翔的小白
10-22 623
1、首先官网解释下： @select的作用和@selection-change的用法： 例子：选择el-table中的checkbox框后，控制工具栏中的按钮的显示隐藏： 一： 选择一条数据，勾选框框时，让工具栏按钮显示： 二：取消勾勾后，工具栏的按钮禁用： 以下方法，是具体的实现思路： <el-table ref="table" :data="tableD...
修改element单选框禁用之后的颜色自定义
CHENC0518的博客
07-04 1369
【代码】修改element单选框禁用之后的颜色自定义。
解决input框中加入disabled=“disabled“之后，改变字体的颜色（默认的是灰色）
00年女程序员分享自己的学习笔记
07-21 5534
此问题，以解决input框中加入disabled=“disabled“之后，改变字体的颜色（默认的是灰色）为例。我们要设置那个input样式时，要深入选中class=“el-input_inner”
修改input的disabled状态下的字体颜色
Cheris_LT的博客
01-05 1724
使用：webkit-text-fill-color，完事 /deep/ .van-field__control:disabled { -webkit-text-fill-color: #323233; }
el-checkbox禁用样式修改（改为正常样式）
HTE_YOUNG_MAN的博客
08-29 1679
el-checkbox禁用样式修改（
动态修改el-select 选中的值字体颜色 和下拉框字体颜色
wanyu729的博客
07-30 1342
在.el-select 使用div 包裹 动态添加类名 根据scope.row.taskLevel 值添加不同的类名。在el-option 里边添加:style="{ color: priorityColor(item.value) }"return 'orange';// 紧急 - 红色。虽然办法笨 但可行。
Element UI组件中el-checkbox组件样式的修改
qq_45623597的博客
04-20 7347
问题描述： Element UI组件仅提供了按钮形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性（fill)，非按钮形式的如何修改这些样式呢? 解决方案： 提示：直接修改CSS属性，相关代码如下： <template lang="pug"> .demo-checkbox el-checkbox( v-model="checked" text-color="#000" ) 相关协议或
el-radio-group筛选禁用启用装填
10-13
在Element UI的el-radio-group组件中，如果你想筛选出禁用（disabled）或启用（enabled）的radio选项，可以结合v-model绑定的值以及`disabled`属性来进行操作。下面是一个例子： 首先，在数据部分，你需要定义一个数组，每个元素都包含一个value和一个disabled属性： ```javascript data() { return { options: [ { value: 'option1', label: 'Option 1', disabled: false }, // 默认项 { value: 'option2', label: 'Option 2', disabled: true }, // 禁用项 { value: 'option3', label: 'Option 3', disabled: false } // 其他项 ], selectedValue: '' }; }, ``` 然后在模板中，你可以这样显示并筛选： ```html <el-radio-group v-model="selectedValue" @change="handleRadioChange"> <el-radio v-for="option in options" :label="option.value" :disabled="option.disabled" >{{ option.label }}</el-radio> </el-radio-group> // 控制函数 methods: { handleRadioChange(value) { console.log('Selected:', value); // 打印当前选择的值 let enabledOptions = this.options.filter(option => !option.disabled); console.log('Enabled options:', enabledOptions); // 打印所有启用的选项 } } ``` 在这个示例中，`v-model`控制当前选中的radio，`:disabled`用于设置每个选项的禁用状态。当用户选择某个选项时，`handleRadioChange`函数会被触发，它会打印所选值，并通过`filter()`方法获取到所有的启用选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值