使用特殊网络符号做复选框
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/