el-radio 样式修改

要修改el-radio单选框的样式，可以使用HTML和CSS代码来实现。首先，你可以使用HTML代码来创建el-radio单选框组件，如下所示：

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

然后，你可以使用CSS代码来修改el-radio单选框的样式。例如，你可以添加以下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;
}

如果你想将el-radio单选框的小圆圈改为方框，你可以添加以下CSS代码：

/deep/ .el-radio__inner {
  border-radius: 2px !important;
}

/deep/ .el-radio__input.is-checked .el-radio__inner::after {
  content: '';
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

通过使用以上CSS代码，你可以修改el-radio单选框的样式，包括背景、图案以及小圆圈的形状。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS修改单选框样式（element）](https://blog.csdn.net/weixin_48998573/article/details/124507719)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [el-radio单选框样式修改为多选框样式](https://blog.csdn.net/qq_45479398/article/details/129120162)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]