要修改 `
el-radio`
组件的
样式，可以使用以下方法：
1. 使用 CSS 全局
样式修改
可以在全局
样式文件中添加以下 CSS 代码，来修改 `
el-radio`
组件的
样式：
```css
/* 选中状态下的圆点颜色 */
.
el-radio__input.is-checked .
el-radio__inner {
background-color: #ff0000; /* 修改为红色 */
}
/* 未选中状态下的圆点颜色 */
.
el-radio__input:not(.is-checked) .
el-radio__inner::after {
background-color: #00ff00; /* 修改为绿色 */
}
/* 文字颜色 */
.
el-radio__label {
color: #0000ff; /* 修改为蓝色 */
}
```
2. 使用 `>>>` / `/deep/` / `::v-deep` 选择器修改
可以在
组件所在的页面或
组件内部的 `<style>` 标签中，使用 `>>>` / `/deep/` / `::v-deep` 选择器来修改 `
el-radio`
组件的
样式。例如：
```html
<template>
<div>
<
el-radio v-model="radio" label="1">选项一</
el-radio>
<
el-radio v-model="radio" label="2">选项二</
el-radio>
</div>
</template>
<style scoped>
/* 使用 >>> 选择器修改 */
/* 选中状态下的圆点颜色 */
.
el-radio__input.is-checked >>> .
el-radio__inner {
background-color: #ff0000; /* 修改为红色 */
}
/* 未选中状态下的圆点颜色 */
.
el-radio__input:not(.is-checked) >>> .
el-radio__inner::after {
background-color: #00ff00; /* 修改为绿色 */
}
/* 文字颜色 */
.
el-radio__label {
color: #0000ff; /* 修改为蓝色 */
}
/* 使用 /deep/ 选择器修改 */
/* 选中状态下的圆点颜色 */
.
el-radio__input.is-checked /deep/ .
el-radio__inner {
background-color: #ff0000; /* 修改为红色 */
}
/* 未选中状态下的圆点颜色 */
.
el-radio__input:not(.is-checked) /deep/ .
el-radio__inner::after {
background-color: #00ff00; /* 修改为绿色 */
}
/* 文字颜色 */
.
el-radio__label {
color: #0000ff; /* 修改为蓝色 */
}
/* 使用 ::v-deep 选择器修改 */
/* 选中状态下的圆点颜色 */
.
el-radio__input.is-checked ::v-deep .
el-radio__inner {
background-color: #ff0000; /* 修改为红色 */
}
/* 未选中状态下的圆点颜色 */
.
el-radio__input:not(.is-checked) ::v-deep .
el-radio__inner::after {
background-color: #00ff00; /* 修改为绿色 */
}
/* 文字颜色 */
.
el-radio__label {
color: #0000ff; /* 修改为蓝色 */
}
</style>
```
以上就是两种修改 `
el-radio`
组件样式的方法。其中，使用 CSS 全局
样式修改的方法会影响到整个项目中所有使用到 `
el-radio`
组件的
样式，而使用 `>>>` / `/deep/` / `::v-deep` 选择器修改的方法只会影响到当前页面或
组件中的 `
el-radio`
组件的
样式。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
