element-ui radio单选框CSS样式修改

在实际工作中需要对element-ui的 radio单选框的样式进行调整

element-ui官网

原来的样式：

废话不多说 直接上代码,我用的scss,在单页面使用要加 ::v-deep深度选择器来修改 哦！

::v-deep {
// 单选
.el-radio {
// 默认文本样式
  .el-radio__label {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
  }
  // icon 默认样式
  .el-radio__inner {
    background: #024b8a;
    border: 1px solid rgba(23, 150, 165);
  }
    // 选中文本样式
  .el-radio__input.is-checked + .el-radio__label {
    font-size: 14px;
    color: #00ffffde;

    font-weight: 500;
  }
  // 选中 icon 样式
    .el-radio__inner::after {
    width: 8px;
    height: 8px;
    // background-color: #00ffff;
    background-color:#00ffffde ;
  }
  // 覆盖默认 样式
  .el-radio__input.is-checked .el-radio__inner {
    // border: 1px solid #00ffff;
    border: 1px solid #00ffffde;

    background-color: transparent;
  }
}

}

效果如图：

在这里插入图片描述

如果你觉得有用请给我一个免费的赞 + 收藏哦！