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/

  • 相关阅读:
    内联函数与宏定义
    三色塔汉诺塔 三色
    Volatile C
    阶乘 简单递归实现
    双色汉诺塔 算法 (递归)
    向上向下排序
    Convert、Parse、TryParse、(int)等区别
    ToString()、Convert.ToString()、(string)、as string 的区别[转]
    ASP.NET页面刷新方法大集合
    getElementByID,getElementsByName,getElementsByTagName的区别
  • 原文地址:https://www.cnblogs.com/codebook/p/10072781.html
Copyright © 2011-2022 走看看