checkbox这类组件的通过伪元素实现自定义图标

最新推荐文章于 2024-08-08 18:06:33 发布

咖喱&土豆

最新推荐文章于 2024-08-08 18:06:33 发布

阅读量479

点赞数

分类专栏： vue 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/qq_35703552/article/details/125051438

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

你还在为checkbox这类组件的勾选样式不符合ui设计而苦脑吗？下面手摸手教你修改三方组件的样式

通过调试发现其实就是通过伪元素实现的加载对应的字体图标

在这里插入图片描述

:deep(.nut-checkbox__icon)::before {
  width: 18px;
  height: 18px;
  content: '';
  background: url('../../../../../../assets/icons/select_all.png') no-repeat 0 0;
  background-size: 100%;
}
:deep(.nut-checkbox__icon--unchecked)::before {
  width: 18px;
  height: 18px;
  content: '';
  background: url('../../../../../../assets/icons/select_no.png') no-repeat 0 0;
  background-size: 100%;
}