最终实现效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/783218365bce6488c387f28e564bd882.png)
首先我们可以拿checkbox 复选框 来举例子
我们可以使用一个choose作为 容器,input 原有表单隐藏掉,利用labal 标签 继承的关系来自定义效果。
html 代码如下, input 的id值一定是与 label 对应的
<div class="choose">
<input type="checkbox" name="name" id="id1">
<label for="id1"></label>
<span>男</span>
<div>
css 代码 如下所示:
给 父级盒子choose 做一个相对定位
给 原来的表单类型更改大小并隐藏
将lable 定位到 input 的位置,根据label 自定义实现复选框效果
给自定义的复选框设置选中后的背景颜色
选中后的效果 改写 ☑️
/*给 父级盒子choose 做一个相对定位*/
.choose{
position: relative;
}
/*5.给 原来的表单类型更改大小并隐藏*/
.choose input[type="checkbox"]{
height: 2.125rem;
width: 2.125rem;
vertical-align: middle;
opacity: 0;
}
/*6.将lable 定位到 input 的位置,根据label 自定义实现复选框效果 */
.choose label{
position: absolute;
background: #E5E5E5;
left:0;
top: 0.5rem;
width: 2.125rem;
height: 2.125rem;
border-radius: 50%;
}
/*7. 给自定义的复选框设置选中后的背景颜色 */
.choose input:checked+label{
background: #FBD9D5;
}
/*8. 选中后的效果 改写 ☑️*/
.choose input:checked+label::after{
position: absolute;
left: .6375rem;
top:.24rem;
content: "";
width: .575rem;
height:.9125rem ;
border: .225rem #F25441 solid;
transform: scale(0.8);
border-top: none;
border-left: none;
transform: rotate(45deg);
}