更改checkbox默认样式、radio默认样式，CSS实现自定义

来源：互联网发布：tomcat apache 编辑：程序博客网时间：2024/05/21 14:41

原理是被label标签包裹的input与该label是绑定的，点击该label内的元素也触发check，于是可以将标签内的input隐藏，换上自定义图片或者自定义css样式。

利用after伪元素自定义radio
好处就是少写个标签清爽些，看起来比较简洁

<label><input name="year" type="radio"><span>2011</span></label><label><input name="year" type="radio" checked><span>2012</span></label><label><input name="year" type="radio"><span>2013</span></label>

        label input[type="radio"] {            appearance: none;            -webkit-appearance: none;            outline: none;            margin: 0;        }        label input[type="radio"]:after {            display: block;            content: "";            width: 12px;            height: 12px;            background: #fff;            border-radius: 50%;            border: 2px solid #bfbfbf;        }        label input[type="radio"]:checked:after {            background: #0593d3;            border: 2px solid #fff;        }

自定义radio效果图

再试试利用图片自定义，这次不用after伪元素了，多加一个i标签，对标签设置背景图片，check状态再换一张。
先准备两张小图片，当然，实际生产中请合并，不然一堆小图片塞满请求，影响体验。
这是UI同事准备的两张小图，不厚道的直接拿来用了..
uncheck check

<label class="custom-checkbox"><input class="check-zhengshe" type="checkbox"><i></i><span>check1</span></label><label class="custom-checkbox"><input class="check-wapian" type="checkbox"><i></i><span>check2</span></label><label class="custom-checkbox"><input class="check-zhengwu" type="checkbox"><i></i><span>check3</span></label>

        .custom-checkbox input[type="checkbox"] {            appearance: none;            -webkit-appearance: none;            outline: none;            display: none        }        .custom-checkbox {            width: 100%;            display: block;            margin: 24px 0;            cursor: pointer;        }        .custom-checkbox input[type="checkbox"] + i {            width: 12px;            height: 12px;            display: inline-block;            margin-right: 12px;            background: url("http://img.blog.csdn.net/20171212172149509?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhpc2hpX3R1ZG91bmk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;        }        .custom-checkbox input[type="checkbox"]:checked + i {            background-image: url("http://img.blog.csdn.net/20171212172212797?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhpc2hpX3R1ZG91bmk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast")        }

自定义checkbox效果图

阅读全文

0 0