首页 前端知识 修改element ui Radio 单选框默认样式

修改element ui Radio 单选框默认样式

2024-04-29 12:04:37 前端知识 前端哥 337 644 我要收藏

需求: 

 

html: 

<el-form-item label="状态:" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">已上线</el-radio>
<el-radio label="1">已下线</el-radio>
</el-radio-group>
</el-form-item>
复制

 css:

::v-deep .el-form-item__content {
.is-checked .el-radio__inner {
width: 18px;
height: 18px;
border-radius: 50px;
border: none !important;
background: #FA5151 !important;
}
.el-radio__inner {
width: 18px;
height: 18px;
border-radius: 50px;
}
.is-checked .el-radio__label {
color: #262626 !important;
}
.el-radio__input.is-checked .el-radio__inner::after {
content: "";
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: block;
position: absolute;
top: 5px;
left: 4px;
transform: rotate(-45deg);
border-radius: 0px;
background: none;
}
}
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6559.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!