修改 el-radio单选按钮选中样式

你可以使用 CSS 来自定义 `el-radio` 单选按钮的选中样式。比如，你可以设置选中状态下的背景颜色和边框颜色等。以下是一个示例 CSS 样式：

.el-radio__input.is-checked+.el-radio__label {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

在这个样式中，`.el-radio__input.is-checked` 选择器表示选中状态下的单选按钮，`.el-radio__label` 表示单选按钮的标签。你可以使用这个样式来修改选中状态下的背景颜色为 `#409EFF`，边框颜色也为 `#409EFF`，文字颜色为白色。

将这个样式添加到你的 CSS 文件中，就可以自定义 `el-radio` 单选按钮的选中样式了。

相关问题

el-radio-group 按钮形状

el-radio-group按钮的形状可以通过修改样式来改变。根据引用\[3\]中的代码，可以使用以下样式修改el-radio的形状为方框：

/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;
}

将以上样式添加到你的代码中，el-radio-group按钮的形状将会变为方框。
#### 引用[.reference_title]
- *1* *2* [改写el-radio 样式为el-checkbox，另外添加上取消已选中项的功能](https://blog.csdn.net/m0_65835778/article/details/129169088)[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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

el-radio-group 自定义样式

el-radio-group的自定义样式可以通过修改其内部元素的样式来实现。你可以使用/deep/或>>>选择器来修改el-radio-group内部元素的样式。例如，你可以使用/deep/.el-radio__input来修改el-radio-group中的单选框的样式，使用/deep/.el-radio.is-bordered.is-checked::before来修改选中状态下的单选框的样式。你还可以使用/deep/.el-radio.is-bordered来修改单选框的边框样式。另外，你可以使用/deep/.el-radio__label来修改单选框的标签样式。如果你想修改el-radio-group中的el-radio-button的样式，你可以使用/deep/.el-radio-button__inner来修改按钮的样式。例如，你可以修改按钮的宽度、高度、边框样式、字体样式等。记得在样式中添加scoped属性来限定样式的作用范围。
#### 引用[.reference_title]
- *1* [自定义elemetui中el-radio 的样式](https://blog.csdn.net/User_XuKang/article/details/123376642)[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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [el-radio-button自定义样式](https://blog.csdn.net/qq_41838435/article/details/118572407)[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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]