el-radio、el-checkbox,element组件单选、多选样式调整(自定义样式)

3,873 阅读1分钟
1、单选按钮
// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #1D1F24
}
/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #4A62E7 !important;
  border-color: #4A62E7 !important;
}
// hover时颜色
::v-deep .el-radio__inner:hover {
  border-color: #4A62E7;
}
2、复选框
/* checkbox选择框样式修改 */
::v-deep .el-checkbox {
  // 选框
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    // 中间的 “✔” 的位置调整
    &::after {
      left: 5px;
      top: 2px;
    }
    &:hover {
      border-color: #4A62E7;
    }
  }
  // label
  .el-checkbox__label {
    color: #1D1F24;
  }
}
// 选中且不被禁用的样式
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4A62E7;
  border-color: #4A62E7;
}
// 选中且被禁用的样式
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background: rgb(177, 187, 247);
  border-color: rgb(177, 187, 247);
}
// 选中后中间的 “✔” 的样式
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}