对于elementui- el-switch 样式的修改

187 阅读1分钟

众所周知, el-switch 文字描述是位于 dom两侧, 有歧义不说,关键是实在是丑极了 在产品的极力要求下,改了默认样式

image.png

// 自定义switch样式
.cus-Switch {
  .el-switch__label--left {
    position: relative;
    left: 70px;
    color: #fff;
    z-index: -1111;
    span {
      width: 40px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 70px;
    color: #fff;
    z-index: -1111;
    span {
      display: inline-block;
      width: 40px;
    }
  }
  .el-switch__core {
    width: 65px !important;
  }
  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 10;
    color: #9c9c9c !important;
  }
}