vue element ui CheckBox样式自定义

vue yekong

vue element ui CheckBox样式自定义

            <div class="material">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="空管"></el-checkbox>
                <el-checkbox label="光"></el-checkbox>
                <el-checkbox label="铜"></el-checkbox>
                <el-checkbox label="铜/光"></el-checkbox>
              </el-checkbox-group>
            </div>
      .material {
        width: 406px;
        height: 240px;
        background: rgba(#0A4468, 0.79);
        border: 1px solid rgba(#107A81, 0.79);

        ::v-deep {
          .el-checkbox-group {
            padding: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: nowrap;
            flex-direction: column;
            align-content: flex-start;

            .el-checkbox {
              margin-bottom: 20px;

              .el-checkbox__label {
                font-size: 16px;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: #FFFFFF;
              }
            }

            .el-checkbox__inner {
              width: 19px;
              height: 19px;
              border: none;
              background: url("../assets/icon/icon_checkbox.png") center center no-repeat;
              background-size: 18px 18px;

              &::after {
                display: none !important;
              }
            }

            .is-checked {
              .el-checkbox__inner {
                width: 19px;
                height: 19px;
                border: none;
                background: url("../assets/icon/icon_tree_active.png") center center no-repeat;
                background-size: 19px 19px;
              }
            }
          }
        }
      }
喜欢