自定义对勾icon，选中和未选中状态

布满荆棘的人生 2022-02-27 11:58 208阅读 0赞

<html>
    <head>
        <title></title>
        <style type="text/css">
            /**绿色勾*/
            .myicon-tick-checked {
                display: inline-block;
                position: relative;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: #2ac845;
            }
            /**灰色勾*/
            .myicon-tick-uncheck {
                display: inline-block;
                position: relative;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: #5f646e;
            }
            .myicon-tick-checked:before, .myicon-tick-checked:after,.myicon-tick-uncheck:before,.myicon-tick-uncheck:after {
                content: '';
                pointer-events: none;
                position: absolute;
                color: white;
                border: 1px solid;
                background-color: white;
            }
            .myicon-tick-checked:before,.myicon-tick-uncheck:before {
                width: 1px;
                height: 1px;
                left: 25%;
                top: 50%;
                transform: skew(0deg,50deg);
            }
            .myicon-tick-checked:after,.myicon-tick-uncheck:after {
                width: 3px;
                height: 1px;
                left: 45%;
                top: 42%;
                transform: skew(0deg,-50deg);
            }
        </style>
    </head>
    <body>
    <span class="myicon-tick-checked"></span>
    <span class="myicon-tick-uncheck"></span>
    </body>
    </html>

效果图

![20190327164149347.png][]

[20190327164149347.png]: /images/20220227/bbf7d8b63c8e4d608882fe10851b7be4.png