导航：首页 > 网络技术 >

web前端入门到实战：总结如何修改美化radio、checkbox的默认样式

发表于：2024-11-25 作者：热门IT资讯网编辑

编辑最后更新 2024年11月25日，现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的c

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。

原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[type=checkbox]:checked+label{}

利用css3伪元素实现样式修改

html代码

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）   您的性别：
                            男    
                     女

css样式

.radio-sex {    position: relative;    display: inline-block;    margin-right: 12px;}.radio-sex input {    vertical-align: middle;    margin-top: -2px;    margin-bottom: 1px;    /* 前面三行代码是为了让radio单选按钮与文字对齐 */    width: 20px;    height: 20px;    appearance: none;/*清楚默认样式*/    -webkit-appearance: none;    opacity: 0;    outline: none;    /* 注意不能设置为display:none*/}.radio-sex label {    position: absolute;    left: 0;    top: 0;    z-index: -1;    /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/    width: 20px;    height: 20px;    border: 1px solid #3582E9;    border-radius: 100%;}.radio-sex input:checked+label {    background: #3582E9;}.radio-sex input:checked+label::after {    content: "";    position: absolute;    left: 8px;    top: 2px;    width: 5px;    height: 12px;    border-right: 1px solid #fff;    border-bottom: 1px solid #fff;    transform: rotate(45deg);}

优点：充分借助了CSS3的优势，无需使用js和图片，仅用纯CSS3就可搞定

缺点：兼容性较差，仅支持IE9+

案例：

利用图片实现样式修改

实现思路
1.设置input 属性hidden对该input进行隐藏

2.借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input

3.定义label的样式，设置未选中状态的背景图

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）.advice{                    height: 12px;                    width: 12px;                    display: inline-block;                    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');                    background-repeat: no-repeat;                    background-position: center;                    vertical-align: middle;                    margin-top: -4px;                }

4.使用相邻选择器设置选中状态label的样式

input[type="radio"]:checked + .advice{                    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');                }

以上是radio单选框的实现代码，checkbox也是类似将input type定义成checkbox即可