elementUi el-checkbox更改样式

最新推荐文章于 2024-04-25 11:40:06 发布

走向大前端

最新推荐文章于 2024-04-25 11:40:06 发布

阅读量1k

点赞数 8

文章标签： elementui 前端

本文链接：https://blog.csdn.net/abs_botton/article/details/134945475

版权

版本:element2 vue2

原ui样式

更改后样式

    <el-checkbox v-model="form.autosave" :false-label="1" :true-label="0">
              选项1
    </el-checkbox>

css代码:

  ::v-deep .el-checkbox__inner{
        border-radius: 50%;
      }
      ::v-deep .el-checkbox__label{
        font-size: 14px;
        font-weight: 400;
        color: #596480;
        padding-left: 3px;
      }
      ::v-deep .is-checked .el-checkbox__inner{
        border-radius: 50%;
        border: 1px solid #3790FE;
        background-color:transparent;
      }
      ::v-deep .is-checked .el-checkbox__inner::after{
        width: 8px;
        height: 8px;
        content: "";
        border: none;
        background-color: #3790FE;
        left: 2.2px;
        top: 2px;
        border-radius: 50%;
        transform: none;
      }