修改el-checkbox 选中后的颜色

最新推荐文章于 2025-04-09 16:12:34 发布

weixin_46156770

最新推荐文章于 2025-04-09 16:12:34 发布

阅读量5.4k

点赞数 1

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/125867582

版权

vue 同时被 2 个专栏收录

41 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

这篇博客详细介绍了如何通过CSS修改element-ui库中checkbox的选择框颜色、背景颜色以及选中后的文本颜色。通过设置`.el-checkbox__input`的不同状态样式，实现了选中和聚焦时的视觉效果改变。同时，也展示了如何调整选中后相邻文本的颜色，以保持UI风格的一致性。

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

//修改选择框的颜色
.el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: #2a65ff!important;
      background-color: #2a65ff!important;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color:  #2a65ff!important;
    }
    //修改选中后文本的颜色
    .el-checkbox__input.is-checked+.el-checkbox__label{
    color:#2a65ff!important;
}