Element Checkbox（复选框）样式自定义

最新推荐文章于 2025-07-16 16:51:06 发布

crazybai0001

最新推荐文章于 2025-07-16 16:51:06 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Element UI 文章标签：前端 elementui css

本文链接：https://blog.csdn.net/crazybai0001/article/details/127287813

Element UI 专栏收录该内容

13 篇文章

订阅专栏

这篇博客主要介绍了如何自定义Element UI的复选框样式，包括选中和未选中状态下的背景色、边框色以及可勾选小方框的颜色。通过展示原始效果与目标效果的对比，并提供了修改后的HTML代码和CSS实现方式。

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

直接使用Element 复选框，效果如下：

最终需要修改成的效果如下：

注意，选中状态、非选中状态时调整了背景色、边框色、可勾选小方框的颜色

复选框HTML代码：

<div class="body-content-checkbox-wrapper">
 <el-checkbox-group v-model="formData.settlementSubType">
  <!-- 第一个元素的disabled属性设置为了true -->
  <el-checkbox label="01" disabled>采购订单</el-checkbox>
  <el-checkbox label="02">反算单</el-checkbox>
  <el-checkbox label="03">管输单</el-checkbox>
  <el-checkbox label="04">其他费用单</el-checkbox>
  <el-checkbox label="05">偏差结算单</el-checkbox>
 </el-checkbox-group>
</div>

通过修改CSS实现最终效果：

.body-content-checkbox-wrapper {
    /* 未选中时的样式 */
    /deep/ .el-checkbox {
        background: #fff;
        padding: 10px 10px;
        line-height: 100%;
        border-radius: 4px;
        margin-right: 10px;
    }
    /* 选中状态时的样式 */
    /deep/ .el-checkbox.is-checked {
        background: #EDF6F2;
        border: 1px solid #47A87D;
        padding: 10px 10px;
        border-radius: 4px;
    }
    /* 选中状态、同时设置了disabled为true的复选框的样式（HTML代码中第一个checkbox的disabled设置为了true */
    /deep/ .el-checkbox.is-disabled.is-checked {
        padding: 10px 10px;
        border-radius: 4px;
    }
    /* 选中状态、且disabled设置为true的checkbox的文本的样式 */
    /deep/.el-checkbox__input.is-disabled+span.el-checkbox__label {
        color: #47a87d;
        cursor: not-allowed;
    }
    /* 选中状态、disabled设置为true的复选框，设置其可勾选方框的样式 */
    /deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
        background-color: #47a87d;
        border-color: #47a87d;
    }
}