Html
    Css
    Js

    
                        
input[type='checkbox'],input[type='radio'] {
	width:18px;
	height:18px;
	position:relative;
	background:transparent;
	border:0;
	outline:none;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}
input[type='checkbox']:before,input[type='radio']:before {
	content:"";
	position:absolute;
	width:16px;
	height:16px;
	border:1px solid #999;
	border-radius:100%;
}
input[type='checkbox']:checked:before,input[type='radio']:checked:before {
	border:1px solid transparent;
	background:#5ECD62;
}
input[type='checkbox']:checked:after {
	content:"";
	position:absolute;
	top:3px;
	left:6px;
	border-right:2px solid transparent;
	border-bottom:2px solid transparent;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	width:4px;
	height:8px;
	border-color:#fff;
}
input[type='radio']:checked:after {
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	border:2px solid #fff;
	border-radius:100%;
	width:8px;
	height:8px;
	background:#5ECD62;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS自定义美化checkbox、radio

2
      码农TT0
      2017/8/15 14:02:55
      不错,还是比较实用。谢谢分享 回复
      罄?一瞥0
      2017/8/11 10:05:43