elementUI解决el-checkbox自定义样式、@change样式的失效等bug - 代码示例

最新推荐文章于 2025-06-28 14:45:55 发布

草巾冒小子

最新推荐文章于 2025-06-28 14:45:55 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui Element踩坑篇

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/88895953

element-ui 同时被 2 个专栏收录

39 篇文章

订阅专栏

Element踩坑篇

28 篇文章

订阅专栏

本文介绍如何在 ElementUI 中自定义 el-checkbox 的样式，并确保 @change 事件正常工作。通过调整 CSS 和确保 label 与 @change 参数一致，实现美观且功能完整的复选框组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementUI解决el-checkbox样式（自定义样式问题）

1. 需求（`如图所示`）：

在这里插入图片描述

2. 代码示例说明：（截图示下）

测试正常。
在这里插入图片描述

/* 热门职位 + 区域  组件替换样式 */
.hot-jobs .tagbtn, .area-jobs .tagbtn{border-radius: 30px;margin:0;margin-right: 5px;margin-bottom: 10px;background: rgba(0,0,0,0)}
.tagbtn.is-bordered.is-checked,.area-jobs.is-bordered.is-checked{background: #4095f7;}
.tagbtn .el-radio__input.is-checked .el-radio__inner, .area-jobs .el-radio__input.is-checked .el-radio__inner, .el-radio--mini.is-bordered .el-radio__inner{display: none!important;}
.tagbtn .el-radio__input.is-checked+.el-radio__label, .area-jobs .el-radio__input.is-checked+.el-radio__label{color: #FFF;}

.el-radio.is-bordered+.el-radio.is-bordered {margin-left: 0px;}