el-checkbox 勾选框对勾颜色问题?
如何把后面的对勾颜色换成橙色,试过这么写,套上了两层border,应该如何修改
:deep .el-checkbox__inner::after {
border: 1px solid red;
}
回复
1个回答

test
2024-07-13
覆写一下 .el-checkbox__input.is-checked .el-checkbox__inner
的背景色、边框色以及after
伪类的 border-color
就可以了。
.my-box {
.el-checkbox {
&.is-checked {
.el-checkbox__inner {
background-color: #ffa000;
border-color: #ffa000;
&::after {
border-color: #890077;
}
}
}
}
}
如果不能覆写的话,你需要检查一下你覆写的样式权重是否是大于主题样式的权重的。如果懒得操作可以直接使用 !important
。以及你是否开启了 css scope
如果开启了 scope
的话,需要添加样式穿透。
如果要全局都改变颜色的话,可以通过修改主题配置预设中的 复选框 预设的颜色就行了。
// 选中的背景色
$--checkbox-checked-background-color: 你想要的橙色
// 选中时的边框色
$--checkbox-checked-input-border-color: 你想要的橙色
// 选中时的对勾颜色
$--checkbox-checked-icon-color: 你想要的橙色
// 经过时的边框色
$--checkbox-input-border-color-hover: 你想要的橙色
多选框组件其他的颜色预设可以在这里看到 👉 element/checkbox.scss at dev · ElemeFE/element
以及相关的变量预设 👉 element/var.scss at dev · ElemeFE/element
如果不知道如何覆写 EleUI 的主题,可以看这里 👉 在项目中改变 SCSS 变量 - 组件 | Element
去掉默认的边框就直接去掉 .el-checkbox__inner
的 border
属性就好了。
只不过对勾可能没有对齐,你自己稍微处理一下就行。或者直接把默认边框色设为透明(border-color: transparent
)也可以。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容