html做出漂亮的复选框（angular）

本是古典何须时尚 2023-05-31 06:40 9阅读 0赞

效果

![20191023104131123.png][]![20191023104147814.png][]

首先要准备两张svg格式的图片，分别是未选中状态和选中状态的。

**icon\_check.svg**

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1570694883044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3294" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M871.404807 216.586725a64.036692 64.036692 0 0 0-64.036692-63.991532H216.609305a64.036692 64.036692 0 0 0-64.014112 63.991532v590.78139a64.036692 64.036692 0 0 0 64.014112 64.036692h590.75881a64.036692 64.036692 0 0 0 64.036692-64.036692V216.586725z m-440.30871 500.416494l-203.174245-203.196824 63.856053-63.856053 139.318192 139.273032L732.222095 288.119956l63.856053 63.856053-364.982051 365.02721z" p-id="3295" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#1c678c"></path></svg>

**icon\_nocheck.svg**

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1570694999785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3446" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M768.03387 872.669283H255.96613a104.725733 104.725733 0 0 1-104.635413-104.657993V255.98871a104.770893 104.770893 0 0 1 104.635413-104.657993h512.04516a104.770893 104.770893 0 0 1 104.657993 104.657993v512.04516a104.748313 104.748313 0 0 1-104.635413 104.635413zM255.96613 232.618479c-12.870562 0-23.370232 10.499669-23.370231 23.370231v512.04516c0 12.870562 10.477089 23.370232 23.370231 23.370231h512.04516c12.870562 0 23.370232-10.499669 23.370231-23.370231V255.98871c0-12.870562-10.499669-23.370232-23.370231-23.370231H255.96613z" p-id="3447"></path></svg>

因为我用的是angular写的，大家可以根据自己的框架自行更改。

**index.html**

**index.scss**

.checkbox_labe {
        display: flex;
        align-items: center;
        height: 24px;
        margin-bottom: 2px;
        border-radius: 4px;
        padding-top: 2px !important;
        cursor: pointer;
        padding-left: 2px;
        padding-right: 6px;
        background: #fff;
        box-shadow: 0 2px 0 #797d80;
        color: #1a1a1a;
        font-size: 13px;
        text-align: center;
        border: 1px solid #cbd3d6;
        &:hover {
          opacity: 0.5;
        }
      }
      //  让默认的checkbox图标隐藏
      .checkbox_button {
        display: none;
      }
      .checkbox_span {
        display: inline-block;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        width: 64px;
        vertical-align: middle;
        display: flex;
        padding-left: 24px;
        align-items: center;
      }
      .nocheck_button {
        width: 24px;
        height: 24px;
        display: inline-block;
        background: url(../assets/images/icon_nocheck.svg) no-repeat;
      }
      .check_button {
        width: 24px;
        height: 24px;
        display: inline-block;
        background: url(../assets/images/icon_check.svg) no-repeat;
      }

[20191023104131123.png]: https://img-blog.csdnimg.cn/20191023104131123.png
[20191023104147814.png]: /images/20230531/aa9d4ea5bbf24cb290a5f058867ee42a.png