el-radio-button 如何自定义选中时的颜色

最新推荐文章于 2025-06-25 14:25:33 发布

一川死水

最新推荐文章于 2025-06-25 14:25:33 发布

阅读量1.5k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： ElementUI 前端问题记录学习记录文章标签： javascript elementui 前端

本文链接：https://blog.csdn.net/q469731241/article/details/143287513

学习记录同时被 3 个专栏收录

7 篇文章

订阅专栏

ElementUI

5 篇文章

订阅专栏

前端问题记录

3 篇文章

订阅专栏

el-radio-button 如何自定义选中时的颜色

统一设置颜色,在el-radio-group中加上fill属性,

内容可以是十六进制的颜色值,如

fill="#d4237a"

也可以是英文名称,如

fill="red"

代码如下：

<el-radio-group v-model="type" fill="red">
	<el-radio-button label="一般" :value="1"></el-radio-button>
	<el-radio-button label="紧急" :value="2"></el-radio-button>
	<el-radio-button label="重要" :value="3"></el-radio-button>
</el-radio-group>

在这里插入图片描述

单独为每个el-radio-button 设置不同的颜色

代码如下


<style scoped>
.button-1{
  --el-radio-button-checked-bg-color:var(--el-color-info);
  --el-radio-button-checked-text-color:var(--el-color-white);
  --el-radio-button-checked-border-color:var(--el-color-info);
  --el-radio-button-disabled-checked-fill:var(--el-border-color-extra-light);
}
.button-2{
  --el-radio-button-checked-bg-color:var(--el-color-primary);
  --el-radio-button-checked-text-color:var(--el-color-white);
  --el-radio-button-checked-border-color:var(--el-color-primary);
  --el-radio-button-disabled-checked-fill:var(--el-border-color-extra-light);
}
.button-3{
  --el-radio-button-checked-bg-color:var(--el-color-danger);
  --el-radio-button-checked-text-color:var(--el-color-white);
  --el-radio-button-checked-border-color:var(--el-color-danger);
  --el-radio-button-disabled-checked-fill:var(--el-border-color-extra-light);
}
</style>

然后再el-radio-button 中每个按钮按钮对应引用相应需要的样式即可

<el-radio-group v-model="type">
	<el-radio-button label="一般" :value="1" class="button-1"></el-radio-button>
	<el-radio-button label="紧急" :value="2" class="button-2"></el-radio-button>
	<el-radio-button label="重要" :value="3" class="button-3"></el-radio-button>
</el-radio-group>

在这里插入图片描述