自定义checkbox, radio样式

时间:2021-02-21 19:15:16

17.2.25、nimil

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

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

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

自定义checkbox, radio样式本身的radio外观;自定义checkbox, radio样式本身的checkedbox外观。

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

这是百度给的一个样式图片:自定义checkbox, radio样式

首先,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%;
}

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

  自定义checkbox, radio样式

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

  以上。