ife系列之自定义checkbox、radio样式

最新推荐文章于 2024-09-15 00:30:13 发布

微光瞬间

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量270

点赞数

分类专栏：百度ife前端学习文章标签：前端 checkbox 博客

本文链接：https://blog.csdn.net/qq_31782957/article/details/57457186

版权

百度ife前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ife系列之自定义checkbox、radio样式

问题引出：
　　这几天在忙关于ife的事情，感觉很不错，就直接报名了（免费的，但自觉性要高）。有些小伙伴要问什么是ife，那就直接上传送门ife，自认为这种学习方式很不错，通过自己查资料、看博客和别人交流来探究问题。毕竟每个人的时间都很有限，前端大神们为我们提供了学习和交流的平台，我应该珍惜，更应该感谢。我虽渺小，但仍要向你们致敬。

　　我选择的第一个任务是关于自定义checkbox和radio样式的。下面就把我的思路和参考一些其他人的思路整理分享一下，同时也方便以后自己查阅。
　　首先，大家都知道浏览器默认的checkbox和radio的样式是不可以改变的，其实有点美感的人都会觉得默认的样式丑爆了，对，我一直就是这么认为的。具体为什么见下图：
　　默认的checkbox和radio样式
　　为了将它变美，我查尽资料，功夫不负有心人，终于查到了两种途径来改变它，彻头彻尾地改变它，这两种方式都是通过label标签的for属性与input标签进行绑定来实现的。
　　1）第一种方式，标签绑定后，通过伪类：checked来判断标签是否被选中，然后再利用：：after和：：before伪元素（这叫伪元素，不叫伪类） 进行checked和未checked样式的转换；
　　2）第二种方式，标签绑定后，通过伪类：checked来判断标签是否被选中，使用雪碧图通过background-position定位来进行checked和未checked之间样式的转换。

　　下面就一一来介绍：
　　1）第一种方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义checkbox、radio样式</title>
    <style type="text/css">
        /*清除input的默认样式*/
        input{
            margin: 0;
            display: none;
        }
        /*Start radio and checkbox*/
        #radio + label, #checkbox + label{  
            display: block;
            width: 1rem;
            height: 1rem;
            border: 1px solid #CCC;
            border-radius: 50%;
            line-height: 1rem;
            text-align: center;
            cursor: pointer;
            position: relative;
        }
        #radio:checked + label, #checkbox:checked + label{
            border-color: #F16B41;
            color: #F16B41;
            font-size: 2.1rem;
        }
        #radio:checked + label:after{   
            content:'\2022';/*特殊字符,实心圆*/
            display: inline-block;
            position: absolute;/*使用定位固定元素内容*/
            top: -0.15rem;
            left: 0.04rem;
        }

        #checkbox + label{
            border-radius: 0;
            line-height: 1rem;
        }
        #checkbox:checked + label{
            font-size: 1.1em;
        }
        #checkbox:checked + label:after{
            content:'\2714';/*特殊字符,对勾号*/
            display: inline-block;
        }
        /*End radio and checkbox*/
    </style>
</head>
<body>
    <!--使用for属性绑定input标签，来实现checked或未checked状态之间的转换-->
    <input type="checkbox" id="radio" hidden/>
    <label for="radio" class="radio"></label>

    <br/>

    <input type="checkbox" id="checkbox" hidden/>
    <label for="checkbox" class="checkbox"></label>
</body>
</html>

最终实现图：

优点：响应速度快，不需要浪费图片加载的时间
缺点：代码理解麻烦，由于使用Unicode码，必须指定网页字符集为utf-8，兼容性差。
　　２）第二种方式：

<!DOCTYPE html>
<html>
<head>
    <title>自定义checkbox、radio样式之雪碧图实现方式</title>
    <style>
        /*清除input默认样式*/
        input{
            margin: 0;
            display: none;
        }
        /*Start radio and checkbox*/
        .radio, .checkbox{
            background-image: url("example.png");
        }

        #radio + label, #checkbox + label{  
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-position: -24px -10px;
            cursor: pointer;
        }
        #radio:checked + label{
            background-position: -59px -10px;
        }

        #checkbox + label{
            background-position: -24px -32px;
            border-radius: 0;
        }
        #checkbox:checked + label{
            background-position: -59px -32px;
        }
        /*End radio and checkbox*/
    </style>

</head>
<body>
    <input type="checkbox" id="radio" hidden/>
    <label for="radio" class="radio"></label>

    <br/>

    <input type="checkbox" id="checkbox" hidden/>
    <label for="checkbox" class="checkbox"></label>
</body>
</html>