Html
    Css
    Js

    
                        
.checkbox label::before {
	content:"";
	display:inline-block;
	position:absolute;
	width:16px;
	height:16px;
	left:0;
	margin-left:-20px;
	border:1px solid #cccccc;
	border-radius:3px;
	background-color:#fff;
	-webkit-transition:border 0.15s ease-in-out,color 0.15s ease-in-out;
	-o-transition:border 0.15s ease-in-out,color 0.15s ease-in-out;
	transition:border 0.15s ease-in-out,color 0.15s ease-in-out;
}
.checkbox label::after {
	display:inline-block;
	position:absolute;
	width:18px;
	height:18px;
	left:0;
	top:2px;
	color:white;
	font-size:10px;
	margin-left:-20px;
}
.checkbox input[type="checkbox"],.checkbox input[type="radio"] {
	opacity:0;
	z-index:1;
}
.checkbox input[type="checkbox"]:focus + label::before,.checkbox input[type="radio"]:focus + label::before {
	background-color:#5FB878;
	border-color:#5FB878;
}
.checkbox input[type="checkbox"]:checked + label::before,.checkbox input[type="radio"]:checked + label::before {
	background-color:#5FB878;
	border-color:#5FB878;
}
.checkbox input[type="checkbox"]:checked + label::after,.checkbox input[type="radio"]:checked + label::after {
	font-family:"FontAwesome";
	content:"\f00c";
}
.checkbox input[type="checkbox"]:disabled + label,.checkbox input[type="radio"]:disabled + label {
	opacity:0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,.checkbox input[type="radio"]:disabled + label::before {
	background-color:#eeeeee;
	cursor:not-allowed;
}
.checkbox.checkbox-circle label::before {
	border-radius:50%;
}
.radio,.checkbox {
	position:relative;
	display:unset !important;
	margin-top:0px;
	margin-bottom:0px;
}

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

jquery自定义单选框

更新时间:2019-12-30 09:17:15

0