声明:此样式,需要下载图片(如下),原理很简单,就是隐藏了原生的样式( -webkit-appearance:none),用图片替代而已,你也可以根据项目需要选择合适的图片
html:
check代码:<input type="checkbox" class="checkboxClass" >
radio代码:<input type="radio" class="radioClass">
css:
check代码:.checkboxClass{
-webkit-appearance:none;
outline: none !important;
width:20px;height:17.5px;
display:inline-block;
background:url(/assets/images/checkbox.gif) no-repeat;
background-position:0 0;}
.checkboxClass:checked{
background-position:0 -21px;}
radio代码:.radioClass {
-webkit-appearance:none;
outline: none !important;
width:20px;height:18px;
display:inline-block;
background: url(/assets/images/radio.gif) no-repeat;
background-position: -24px 0;}
.radioClass:checked{
background-position: 0 0;}
图片:
注:图片路径需要替换下