• css_input[checked]复选框去掉默认样式并添加新样式


    效果对比:

    “2713”实体符号√ ;如有兴趣查看详细实体符号请点这里

    代码实现:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title></title>
     7         <style type="text/css">
     8             input[type="checkbox"] {
     9                 width: 12px;
    10                 height: 12px;
    11                 display: inline-block;
    12                 text-align: center;
    13                 vertical-align: middle;
    14                 line-height: 12px;
    15                 position: relative;
    16             }
    17             
    18             input[type="checkbox"]::before {
    19                 content: "";
    20                 position: absolute;
    21                 top: 0;
    22                 left: 0;
    23                 background: #fff;
    24                 width: 100%;
    25                 height: 100%;
    26                 border: 1px solid #CACDCF
    27             }
    28             
    29             input[type="checkbox"]:checked::before {
    30                 content: "2713";
    31                 background-color: #2196F3;
    32                 color: #fff;
    33                 position: absolute;
    34                 top: 0;
    35                 left: 0;
    36                 width: 100%;
    37                 border: 1px solid #2196F3;
    38                 font-size: 12px;
    39                 font-weight: bold;
    40             }
    41         </style>
    42     </head>
    43 
    44     <body>
    45         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    46         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    47         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    48         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    49         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    50         <input type="checkbox" name="btn" id="btn1"><label for="btn1">按钮1</label>
    51     </body>
    52 
    53 </html>
    View Code

    参考博客

  • 相关阅读:
    最小花费
    LOJ10090
    LOJ2436
    loj10087
    LOJ2632
    LOJ10021 Addition Chains
    LOJ10019生日蛋糕
    loj10018数的划分
    LOJ10015扩散
    loj10014数列分段二
  • 原文地址:https://www.cnblogs.com/wush-1215/p/9810993.html
Copyright © 2020-2023  润新知