自定义Element单选按钮选中样式

前提：UI给的设计图，选中样式做的有渐变模糊设计，默认样式不能满足需求。

Element默认样式

自定义后的样式

代码：

<template>
<el-radio-group v-model="radio" class="radio-checked">
  <el-radio :label="1">刘备</el-radio>
  <el-radio :label="2">关羽</el-radio>
  <el-radio :label="3">张飞</el-radio>
</el-radio-group>
</template>


<script>
export default {
  data () {
    return {
      radio: 1
    };
  }
}
</script>

<style>
body {
  background: #000;
}
.radio-checked {
  display: inline-flex;
}
.radio-checked .el-radio {
  display: flex;
  align-items: flex-end;
}
.el-radio {
  margin-right: 68px;
}
.el-radio__label {
  color: #ffffff;
  font-size: 18px;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #10dbdb;
}
.radio-checked .el-radio__input.is-checked .el-radio__inner {
  background-color: transparent;
  box-shadow: 0px 0px 6px #10dbdb inset;
  border: 0;
}

.radio-checked .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  background: #10dbdb;
  width: 8px;
  height: 8px;
}

.radio-checked .el-radio__input .el-radio__inner:hover {
  border-color: #10dbdb;
}
.el-radio__input.is-checked .el-radio__inner::after {
  transform: translate(-50%, -50%) scale(1);
}
</style>

注意：我增加了一个类，class="radio-checked"