antd checkbox选中后样式伪类::before暴力修改成iconfont图标

短命女 2023-02-28 15:21 7阅读 0赞

效果如图  
![都是checkbox,钥匙是选中效果][checkbox]

这里用到了阿里iconfont，需要引入  
（没看什么有用什么没用，一顿试就对了。。）

.ant-checkbox{ 
      border: none;
      background: none;
    }
    .ant-checkbox-inner::after{ 
      width: 0;
      height: 0;
      border: none;
      background: none;
    }
    .ant-checkbox-inner{ 
      border: none;
      background: none;
    }
    .ant-checkbox-checked::after{ 
     	display: none !important;//这里就是把原本的伪类清除
    }
    .ant-checkbox-checked::before{ 
      position: absolute;
      top: 0;
      left: 0;
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\e64e";//icon 图标
      color: #ffc852;//icon 颜色
      display: inline-block;//这以下是我旋转了一下icon，可以不用复制
      -moz-transform:scale(-1);
      -webkit-transform:scale(-1);
      -o-transform:scale(-1);
      transform:scale(-1);
    }

下载的iconfont文件中的css文件 引入后需要的图标content后面的码复制过来就行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]

[checkbox]: /images/20230209/6df2725ef105452dac1d51769ec7bbf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkODEzMjU_size_16_color_FFFFFF_t_70]: /images/20230209/64cd99b832754920b504b5da42aacb1c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 iconfont图标扩展

以阿里巴巴的矢量图标库iconfont为例：[https://www.iconfont.cn/][https_www.iconfont.cn] JeecgBoot开发文档—

分手后的思念是犯贱/ 2023年07月13日 12:12/ 0 赞/ 63 阅读

相关 iconfont图标下载

网址：[https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92&page=2][https_www.iconfont

拼搏现实的明天。/ 2023年03月13日 06:22/ 0 赞/ 56 阅读

相关 antd checkbox选中后样式伪类::before暴力修改成iconfont图标

效果如图 ![都是checkbox,钥匙是选中效果][checkbox] 这里用到了阿里iconfont，需要引入（没看什么有用什么没用，一顿试就对了。。）

短命女/ 2023年02月28日 15:21/ 0 赞/ 8 阅读

相关 checkbox样式美化修改复选框样式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMT

忘是亡心i/ 2023年02月17日 11:20/ 0 赞/ 121 阅读

相关 uni-app 自定义 checkbox 选中后的样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

秒速五厘米/ 2023年01月09日 15:34/ 0 赞/ 273 阅读

相关伪类元素:before 和 :after

关于伪类元素:before和:after 原文地址： [http://www.hulufei.com/post/about-before-and-after-pseudo

今天药忘吃喽~/ 2022年09月20日 08:53/ 0 赞/ 233 阅读

相关 css修改radio、checkbox默认样式

> 为radio类型的input标签添加类名aui-radio，如下 ![0b22aa3cc73441feb246bb914f2aa713.png][] 然后引入

本是古典何须时尚/ 2022年09月16日 01:27/ 0 赞/ 320 阅读

相关 android--笔记--修改CheckBox样式

1、首先要导入你准备用作CheckBox选中和补选中状态的两图片到res的drawable中，如checkbox\_checked.png，checkbox\_normal.p

淩亂°似流年/ 2022年08月10日 16:58/ 0 赞/ 283 阅读

相关伪类after before如何使用阿里的iconfont字体

之前在做一个蛋糕项目的时候，设计给了我一个这样的图片（tips:\[ “ \\e60d”为蛋糕的小图标 \]） ![SouthEast][] 当中的蛋糕图标，我的第一

墨蓝/ 2022年07月15日 03:08/ 0 赞/ 241 阅读

相关 checkbox选中后无法取消的问题

input标签页： <input type="checkbox" name=""> <input type="button" name="clickme" i

不念不忘少年蓝@/ 2022年06月17日 02:52/ 0 赞/ 580 阅读