el-radio-group 选中样式
时间: 2023-06-30 08:03:55 浏览: 291
el-radio-group 是 Element UI 提供的单选框组件,选中样式可以通过设置 CSS 样式来实现。
例如,可以通过以下样式来设置选中单选框的背景色和边框颜色:
```css
.el-radio-group .el-radio-button.is-active {
background-color: #409eff;
border-color: #409eff;
color: #fff;
}
```
其中,`.el-radio-group` 用于限定样式作用范围,`.el-radio-button` 用于选中单选框的样式,`.is-active` 表示选中状态。你可以根据自己的需求修改样式。
相关问题
el-radio-group下的el-radio-button plain样式
el-radio-group组件下的el-radio-button元素有一个名为"plain"的样式,它表示单选按钮将以一种简洁、无边框的形式呈现。当你给el-radio-button设置plain属性或者class为"el-radio-button/plain"时,它的外观会变得更加轻量级,通常适用于追求极简设计或者需要高对比度界面的场景。这种风格下,选中状态的radio按钮背景颜色可能会变浅,而未选中则通常不会有明显的视觉变化。
el-radio-group设置未选中填充颜色
el-radio-group可以通过设置未选中状态的样式来实现未选中填充颜色的效果。你可以在el-radio-group的样式中设置以下代码来实现:
```
.el-radio__input.is-checked+.el-radio__label::before {
border-color: #409EFF;
background-color: #409EFF;
}
.el-radio__input+.el-radio__label::before {
border-color: #dcdfe6;
background-color: #dcdfe6;
}
```
其中,`.el-radio__input.is-checked+.el-radio__label::before`表示选中状态下的样式,`background-color`属性设置填充颜色;`.el-radio__input+.el-radio__label::before`表示未选中状态下的样式,同样可以通过`background-color`属性设置填充颜色。你可以根据具体需求修改颜色值。
阅读全文