Html
    Css
    Js

    
                        
/* 单选按钮*/
.frame .radio input[type='radio'] {
	width:16px;
	height:16px;
	vertical-align:middle;
	opacity:0;
}
.frame .radio {
	position:relative;
}
.frame .radio label {
	width:15px;
	height:15px;
	position:absolute;
	top:4px;
	left:0;
	border:1px solid #CCC;
	border-radius:50%;
	background:#fff;
	cursor:pointer;
}
.frame .radio label:after {
	content:'';
	width:8px;
	height:4px;
	position:absolute;
	top:3px;
	left:3px;
	border:1px solid #98BDF5;
	border-top:none;
	border-right:none;
	opacity:0;
	transform:rotate(-45deg);
	/*-webkit-transform:rotate(-45deg);
	*/
}
.frame .radio input:checked + label {
	background:#1E70EA;
	border:none;
}
.frame .radio input:checked + label + span {
	color:#1E70EA;
}
.frame .radio input:checked + label:after {
	opacity:1;
	border:2px solid #FFF;
	border-top:none;
	border-right:none;
}
/* 复选按钮*/

.frame .checkbox input[type='checkbox'] {
	width:15px;
	height:15px;
	vertical-align:middle;
	opacity:0;
}
.frame .checkbox {
	position:relative;
}
.frame .checkbox label {
	width:15px;
	height:15px;
	position:absolute;
	top:4px;
	left:0;
	border:1px solid #CCC;
	background:#fff;
	cursor:pointer;
}
.frame .checkbox label:after {
	content:'';
	width:8px;
	height:4px;
	position:absolute;
	top:3px;
	left:3px;
	border:1px solid #98BDF5;
	border-top:none;
	border-right:none;
	opacity:0;
	transform:rotate(-45deg);
	/*-webkit-transform:rotate(-45deg);
	*/
}
.frame .checkbox input:checked + label {
	background:#1E70EA;
	border:none;
}
.frame .checkbox input:checked + label + span {
	color:#1E70EA;
}
.frame .checkbox input:checked + label:after {
	opacity:1;
	border:2px solid #FFF;
	border-top:none;
	border-right:none;
}
.disabled-click-text {
	-moz-user-select:none;
	/* FireFox */ 
	-webkit-user-select:none;
	/* Webkit */ 
	-ms-user-select:none;
	/* IE10+ */ 
	-khtml-user-select:none;
	/* 奇葩浏览器 */ 
	user-select:none;
	/* 文本不允许被选择 */
}

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

css编写 单选复选 按钮

0