设置el-checkbox复选框禁用时，对号&文本的颜色

已于 2022-10-21 16:52:07 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： Element-UI组件库 文章标签： elementui
于 2022-10-21 16:11:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38969618/article/details/127448587
版权 
// 设置禁用复选框：对号颜色
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #000;
}
// 禁用复选框、el-input框、el-date-picker时：字体的颜色
el-checkbox__input.is-disabled + span.el-checkbox__label, .el-input.is-disabled .el-input__inner, .el-range-editor.is-disabled input{
  color: #3f4656 !important;
}

qq_38969618
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 修改checkbox disabled颜色_利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)...
weixin_29149709的博客
12-26 686
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_114究竟什么是暗黑模式？这个概念起初来源于macOS系统，该系统的mojave版本为用户提供两个主题皮肤，即浅色和深色的皮肤。自从有了这个概念之后，很多网站和系统都会用户提供了相应的两套肤色，便于用户根据自己的习惯或爱好进行切换从科学的角度讲，低对比度的暗色可以降低屏幕对视网膜的刺激，同时还可以让电子设备更加省电。在过往的印象之...
checkbox 复选框不能为空
09-05
标题"checkbox 复选框不能为空"和描述"checkbox复选框不能为空，至少有一个选项"正是针对这种情况，强调了复选框至少需要有一个被选中的状态。 为了实现这个功能，我们可以编写JavaScript代码进行验证。如提供的...
elementui 解决Checkbox多选框 按钮样式禁用时不显示被选中的按钮
qq_58340302的博客
02-01 1607
找到选中项的对应class，对其的el-checkbox-button__inner加背景色
vue element ui 修改 el-checkbox的禁用状态下的颜色
骨子里的偏爱
03-28 2831
vue element ui 修改 el-checkbox的禁用状态下的颜色
Vue使用 element UI 修改checkbox选择框的默认颜色以及字体颜色
最新发布
qq_45067263的博客
05-08 1931
首先要先去掉 style lang=“scss” 里面的scoped，然后才会生效。
修改el-input、textarea、el-checkbox的禁用状态下的颜色
qq_1336674576的博客
02-25 5273
修改el-input、textarea、el-checkbox的禁用状态下的颜色
el-checkbox 对勾颜色调整
weixin_45449154的博客
11-21 1095
el-checkbox 对勾颜色调整
Vue使用 element UI 修改checkbox的默认颜色
jz_jingzhen的博客
11-05 5305
Vue使用element UI 修改checkbox的颜色 eleme默认的颜色的#409EFF 类蓝色的颜色，官方文档中是没有关于如何修改选中以及hover样式的。那么怎么修改呢？ answer： 1.先把内容放上去，然后F12打开检查 2. 选择多选框 查看elements的css样式 默认样式: 修改时，审查到CheckBox元素，获取到class名，进行修改。 css代码如下： .el-checkbox__input.is-checked+.el-checkbox__label{ color: #F
elementUI中el-checkbox-group,动态禁用el-checkbox项
qq_26780317的博客
09-08 7900
前言： 最近在项目中，需要一个动态禁用el-checkbox选项的功能，某些选项在某些场景下，需要禁止掉，让用户不可选的状态。 一、elementUI框架文档 elementUI框架文档只提供disabled的标签，这种状态是固定的，不是动态的，那么，如何给el-checkbox-group数组下面的某一项el-checkbox-button，动态添加禁用状态呢？ 二、动态添加 动态添加禁用标签，使用:disabled属性，前面加冒号，disabled后面接上禁用的条件。 <div class="f
vue基于element-ui的三级CheckBox复选框功能的实现代码
12-29
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。 效果图预览： 首先是页面布局，...
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应...
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
Element UI是一个常用的前端组件库，它的`el-checkbox`组件用于创建复选框。然而，当我们尝试使用v-model动态绑定数据时，可能会遇到一些问题。本文将探讨在Vue中动态生成`el-checkbox`并解决点击无法正确赋值的难题...
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于React。 用法 安装 使用您最喜欢的依赖项管理器安装库： yarn add react-checkbox-tree 使用npm： npm install react-checkbox-tree --save 注–此库使用了样式，并...
【elementUI】（el-table）设置表格行的checkbox为禁用状态
H_Lu711的博客
07-01 6329
【elementUI】（el-table）设置表格行的checkbox为禁用状态
修改element单选框禁用之后的颜色自定义
CHENC0518的博客
07-04 1240
【代码】修改element单选框禁用之后的颜色自定义。
vue3+element-plus Checkbox 多选框 配置禁用
m0_59769246的博客
06-05 1304
实现多选框 有禁用的时候全选按钮显示不正确
element-ui修改.el-checkbox样式，el-checkbox-group内文字不显示问题
weixin_45727272的博客
01-17 2602
修改样式 //checkebox 的文字颜色 :deep(.el-checkbox__label) { font-size: 16px; color: #fff !important; } //checkbox框的默认的样式 :deep(.el-checkbox__inner) { background-color: transparent; } //checkbox框hover的border颜色 :deep(.el-checkbox__inner:hover) { border-co
element-ui Checkbox-group 自定义选中字体颜色
Mr-k的博客
04-09 2241
/* 设置选中后的文字颜色 */ .newCheckSty .el-checkbox__input.is-checked + .el-checkbox__label { color: #409eff; } /* 设置选中后对勾框的边框和背景颜色 */ .newCheckSty .el-checkbox__input.is-checked .el-checkbox__inner, .newCheckSty .el-checkbox__input.is-indeterminate .el-checkbo.
el-checkbox复选框的回显
03-26
el-checkbox复选框的回显可以通过v-model绑定一个Boolean类型的值来实现。当复选框被选中时，该Boolean值为true；当复选框未被选中时，该Boolean值为false。 在组件的数据源中，可以设置一个布尔值类型的变量，如isChecked，用于控制复选框是否被选中。同时，在el-checkbox标签上，v-model绑定该变量。 ``` <template> <el-checkbox v-model="isChecked">选项一</el-checkbox> </template> <script> export default { data() { return { isChecked: true } } } </script> ``` 当用户点击复选框时，isChecked的值会自动更新，反映复选框的当前状态。可以将isChecked的值保存到组件的数据源中，以便之后再次使用时，能够正确地回显复选框的状态。 ``` <template> <div> <el-checkbox v-model="isChecked">选项一</el-checkbox> <el-button @click="saveData">保存</el-button> </div> </template> <script> export default { data() { return { isChecked: false, formData: {} } }, methods: { saveData() { this.formData.isChecked = this.isChecked // 保存表单数据 } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值