使用特殊网络符号做复选框

1.html

<span class="has-sel-o">✔</span>

2.css样式

    .has-sel-o {
            display: block;
            padding: 3px 3px 3px 2px;
            border: 2px solid #666;
            width: 24px;
            height: 24px;
            overflow: hidden;
            color: #666;
            text-align: center;
            line-height: 14px;
            font-size: 22px;
            box-sizing: border-box;
            cursor: pointer;
            user-select: none;
        }

3.js做切换效果

    $('.has-sel-o').on('click', function (){
        var html = $(this).html()? '': '✔';
        $(this).html(html);
    })

4.效果图

5.常用网络符号

▶ ◀  ▲ ▼  ▸◂▴▾ △ ▽ ▷ ◁ ⊿ ▵▿▹◃ ▪▫☰ ☲ ☱ ☴ ☵ ☶ ☳ ☷ ♂ ♀
◆ ◇⊙ ■ □ △ ▽ ✔ ☑ ✘ ☒ ◎ ☉ ★ ☆ ⊿ ※ © ® ™ Σ ✪ ✯ ◤ ◥ ◣ ◢ ┅ ┇ ✚ 〓
· ▸◂▴▾ ┈ ℃ ℉ ° ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ ❖
☑ ✓ ✔ √ ☐ ☒ ✗ ✘ ㄨ ✕ ✖ ✖ ✦ ✧ ✩ ✰ ✪ ✫ ˆ ˇ @﹫﹟#﹩$﹠&﹪% *﹡﹢﹦﹤
‐ ˜ ﹍ ﹎ + = <  ＿ _ - \  ~ ﹉ ﹊（）〈〉‹›﹛﹜『』〖〗［］《》〔〕{}「」 ◉
Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ ⓐ ⓑ
ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ
Ұ $  ₤ ¥ ₵ 元 零 壹 贰 叁 肆 伍 陆 柒 捌 玖 拾 佰 仟 万 亿 分 厘 毫 微 卍

6.备注

6.1 参考： http://www.fhdq.net/

转载于:https://www.cnblogs.com/codebook/p/10072781.html