0
点赞
收藏
分享

微信扫一扫

CSS修改单选框样式(element)


1.简单的修改颜色

原样式:

CSS修改单选框样式(element)_javascript

 修改后:

CSS修改单选框样式(element)_css_02

HTML代码:



<el-radio-group v-model="newlyAdded.discount">
<el-radio label="0">工品</el-radio>
<el-radio label="1">供应商</el-radio>
</el-radio-group>



CSS代码:

需要先获取在element中 单选框的class名称。



.el-radio__input.is-checked .el-radio__inner {//单选框选择按钮背景样式
border-color: #409EFF;
background: #FFF;
}
.el-radio__inner::after {//按钮内图案样式
width: 7px;
height: 7px;
background-color: #409EFF;
}



注意:主要查看一下当前样式名称是否更换,可能会因为版本的更换而更改名称

如果是简单的修改内部图案都可以使用该方法:

2.铜钱样式

CSS修改单选框样式(element)_vue_03

 HTML代码同上

CSS代码:



.el-radio__input.is-checked .el-radio__inner {//单选框选择按钮背景样式
border-color: #409EFF;
background: #FFF;
}
.el-radio__inner::after {//按钮内图案样式
width: 7px;
height: 7px;
background-color: #409EFF;
}


.el-radio__input.is-checked .el-radio__inner::after {



border-radius: 0px;



}

举报

相关推荐

0 条评论