el-checkbox禁用样式修改（改为正常样式）

最新推荐文章于 2025-06-23 10:53:00 发布

原创最新推荐文章于 2025-06-23 10:53:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

功能实现专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种针对Element UI框架中禁用状态复选框的CSS样式定制方案。通过对父元素应用特定类名，可以修改禁用复选框的颜色、背景及字体大小等属性。

.disabCheck
  >>> .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  border-color: #fff;
}
.disabCheck >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}
.disabCheck >>> .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
}
.disabCheck >>> .el-checkbox__label {
  font-size: 12px;
}

disabCheck为父元素类名