前提: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"