zoukankan      html  css  js  c++  java
  • 使用特殊网络符号做复选框

    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/

  • 相关阅读:
    如何基于Azure平台实现MySQL HA(方法论篇)
    如何对Azure磁盘性能进行测试
    Azure底层架构的初步分析
    聊聊Azure的安全性
    关于Azure带宽的测试
    JavaScript 优化
    SQL时间段查询
    win7+64位+Oracle+11g+64位下使用PLSQL+Developer+的解决办法
    putty 使用方法,中文教程
    怎样才能专心工作
  • 原文地址:https://www.cnblogs.com/codebook/p/10072781.html
Copyright © 2011-2022 走看看