修改el-radio颜色
时间: 2023-10-19 13:34:29 浏览: 504
要修改 el-radio 组件的颜色,您可以使用 CSS 样式来实现。以下是一个示例代码:
```html
<template>
<el-radio v-model="radioValue" :style="{color: radioColor}">
Option
</el-radio>
</template>
<script>
export default {
data() {
return {
radioValue: '',
radioColor: 'red' // 设置初始颜色为红色
}
}
}
</script>
<style scoped>
.el-radio__input.is-checked .el-radio__inner {
border-color: red; /* 修改选中状态下的边框颜色 */
background-color: red; /* 修改选中状态下的背景颜色 */
}
.el-radio__input .el-radio__inner {
border-color: red; /* 修改未选中状态下的边框颜色 */
}
</style>
```
在上面的示例代码中,我们通过设置 `radioColor` 的值来控制 el-radio 的颜色。当 `radioColor` 的值为 'red' 时,el-radio 的选中状态和未选中状态都会显示为红色。您可以根据需要更改 `radioColor` 的值来修改 el-radio 的颜色。
在 CSS 样式中,我们分别针对选中状态和未选中状态修改了边框颜色。您可以根据需要调整颜色值来实现不同的效果。
请注意,在使用以上代码时,确保已经正确引入了 Element UI 库,并且 el-radio 组件的样式类名没有被修改过。
阅读全文