自定义checkbox， radio样式

Posted 2020-09-01

17.2.25、nimil

今天开始做百度前端学院的任务，第一个是自定义checkbox， radio样式。

checkbox和radio两个标签是不可以改变样式的，background-color、border等属性都对其无效。

 

但是本身的样式又不太美观：

本身的radio外观；本身的checkedbox外观。

不能改样式，却又如此的不美观，实在不符合我们现在的审美和需求。

这是百度给的一个样式图片：

首先，html：

    <div>
        <input type="radio" name="one" id="radio2" >
        <label for="radio2" class="radioOne after radioLabel1"></label>
        <input type="radio" name="one" id="radio" >
        <label for="radio" class="radioOne after radioLabel" ></label><!-- 两个radio -->

        <input type="checkbox" name="two" id="checkbox" >
        <label for="checkbox" class="checkboxLabel after"></label>
    </div>

那么，如何改变样式呢。label标签的for属性，为radiol加上对应的id，就可以实现点击label的时候，对应dadio被选中。

本次使用到了background-img、background-position、checked选择器、

首先隐藏input标签、并为label统一加上背景图：

   input{
       display: none;/*隐藏input*/
   }

　　label{
　　　　background: url(img/spread.png);background-repeat: no-repeat;
　　}　　/*为label统一加上背景图：*/

　　.after{
　　　　width: 30px;height: 25px;display: block;/*设置label样式*/
　　}/*定义所有label初始样式*/

　　为每个标签定位背景图，采用了雪碧图方法：

      CSS Sprite、CSS雪碧图应用实例

        .radioLabel{
            background-position: 26% 15%;
        }
        .checkboxLabel{
            background-position: 26% 113%;
        }

 

　　在radio被选中后，改变对应label的样式。这里用到了css选择器：checked。

        #radio2:checked ~ .radioLabel1{
            background-position: 75% 15%;
        }
        #radio:checked ~ .radioLabel{
            background-position: 75% 15%;
        }
        #checkbox:checked ~ .checkboxLabel{
            background-position: 75% 113%;
        }

　　这时会出现一个问题，我试了很多次才发现问题处在什么地方。

　　

　　如图中的1、2，我的label写在对应input下方，如果写在上面，checked选择器是查不到的。上面的css也不会起作用。

　　以上。