CSS修改单选框样式（element）

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

1.简单的修改颜色

原样式：

 修改后：

HTML代码：

<el-radio-group v-model="newlyAdded.discount">
   <el-radio label="0">工品</el-radio>
   <el-radio label="1">供应商</el-radio>
</el-radio-group>

CSS代码：

需要先获取在element中 单选框的class名称。

.el-radio__input.is-checked .el-radio__inner {//单选框选择按钮背景样式
    border-color: #409EFF;
    background: #FFF;
}
.el-radio__inner::after {//按钮内图案样式
    width: 7px;
    height: 7px;
    background-color: #409EFF;
}

注意：主要查看一下当前样式名称是否更换，可能会因为版本的更换而更改名称

如果是简单的修改内部图案都可以使用该方法：

2.铜钱样式

 HTML代码同上

CSS代码：

.el-radio__input.is-checked .el-radio__inner {//单选框选择按钮背景样式
    border-color: #409EFF;
    background: #FFF;
}
.el-radio__inner::after {//按钮内图案样式
    width: 7px;
    height: 7px;
    background-color: #409EFF;
}


.el-radio\_\_input.is-checked .el-radio\_\_inner::after {

<!-- -->

     border-radius: 0px;

}

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情