el-radio-group每个按钮均有不同的选中颜色
时间: 2024-01-11 13:15:10 浏览: 38
可以使用 `el-radio-group` 的 `fill` 属性来设置所有选中按钮的填充颜色,但是如果你想为每个按钮设置不同的选中颜色,需要通过 CSS 来实现。首先,给每个 `el-radio` 添加一个自定义的类名,例如 `custom-radio`,然后在 CSS 中根据这个类名来设置不同的选中颜色,示例代码如下:
```html
<el-radio-group>
<el-radio class="custom-radio" label="Option 1">Option 1</el-radio>
<el-radio class="custom-radio" label="Option 2">Option 2</el-radio>
<el-radio class="custom-radio" label="Option 3">Option 3</el-radio>
</el-radio-group>
```
```css
.custom-radio input[type="radio"]:checked+span {
background-color: #f00; /* 设置选中颜色为红色 */
}
.custom-radio:nth-child(2) input[type="radio"]:checked+span {
background-color: #0f0; /* 设置第二个选中按钮的颜色为绿色 */
}
.custom-radio:nth-child(3) input[type="radio"]:checked+span {
background-color: #00f; /* 设置第三个选中按钮的颜色为蓝色 */
}
```
上面的代码中,通过 `:nth-child()` 选择器来选择第二个和第三个 `el-radio`,然后分别为它们设置不同的选中颜色。你可以根据实际需求来修改代码。