CSS 修改单选框样式（element）

作者：肥晨

2022-11-17
江苏
本文字数：520 字
阅读完需：约 2 分钟

经常需要修改单选框的样式，如果直接放图也能实现，但是就没有这么多好用的 api 了。所以如果用 css 改 element 单选框样式

1.简单的修改颜色

原样式：

修改后：

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.铜钱样式

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;
}

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/bc468fe8267c1e791ebdc18d1】。文章转载请联系作者。

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

CSS 修改单选框样式（element）

1.简单的修改颜色

HTML 代码：

CSS 代码：

2.铜钱样式

HTML 代码同上

CSS 代码：

肥晨

评论