如何修改复选框的样式（其他input标签类推）

最新推荐文章于 2024-05-23 15:36:14 发布

笨钟

最新推荐文章于 2024-05-23 15:36:14 发布

阅读量1.1k

点赞数

分类专栏：复选框作为表格单元编辑器

本文链接：https://blog.csdn.net/A_bet_of_three_years/article/details/78905044

版权

复选框作为表格单元编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.传统的方法
原理：通过label来控制复选框的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用label实现复选框的样式更改</title>
    <style>
        .checkbox{display: inline-block;width: 30px;height: 30px;background: #563fc2;border-radius: 50%;}
        input{width: 20px;height: 20px;background: #f00;opacity: 0;}

    </style>
</head>
<body>
    <label for="id" class="checkbox"> <input type="checkbox" id="sex"> </label>
    <label for="id" class="checkbox"> <input type="checkbox" id="sex"> </label>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js">  </script>
   <script>    
   $(".checkbox").click(function(){
       if($(this).find("#sex").is(':checked')) {
              $(this).css("background","#ff0");
         }else{
              $(this).css("background","#563fc2");
         }
   });
   </script>
</body>
</html>

2.通过字体图标实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用label实现复选框的样式更改</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        input[type="checkbox"]{position: relative;background: 0;border: 0;width: 20px;height: 20px;}
        input[type="checkbox"]::before{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: "\f14a"; font-size: 30px;background: #fff; } 
        input[type="checkbox"]:checked::before{display: block;position: absolute;left:0;top:0;width:30px;height: 30px;
          content: "\f046";}

    </style>
</head>
<body>
    <input type="checkbox" id="sex" class="fa">
</body>
</html>