input复选框的美化


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.checkbox-group{
				margin-bottom: 30px;
			}
			.checkbox{
				cursor: pointer;
				user-select: none;
			}
			.checkbox input{
				display: none;
			}
			.checkbox span{
				display: inline-block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #ccc;
				border-radius: 3px;
				cursor: pointer;
				vertical-align: middle;
				text-align: center;
			}
			.checkbox span:after{
				display: block;
				content: "";
			}
			.checkbox.checked{
				color: rgb(0, 174, 255);
			}
			.checkbox.checked span{
				border-color: rgb(0, 174, 255);
				color: white;
				
			}
			.checkbox.checked span:after{
				content: "√";
				background-color: rgb(0, 174, 255); 
			}
			.checkbox.disabled{
				opacity: .5;
				cursor: not-allowed;
			}
        style>
	head>
	<body>
		<label>
			<input type="checkbox">篮球
		label>
		<script>
			var checkboxs = document.querySelectorAll("[type='checkbox']");
			for(var i=0;i<checkboxs.length;i++){
				var checkbox = checkboxs[i];
				checkbox.onclick = function(e){
					e.stopPropagation();//阻止冒泡到原来的input上
				}
				var label = checkbox.parentNode;
				var span = document.createElement('span');
				label.insertBefore(span,checkbox);
				label.className = 'checkbox';
				label.onclick = function(){
					var labelName = this.className;
					if(labelName.indexOf('disable')>-1){
						return;
					}
					if(labelName.indexOf('checked')>-1){
						this.className = 'checkbox';
					}else{
						this.className = 'checkbox checked';
					}
				}
			}
		script>
	body>
html>

你可能感兴趣的:(组件美化,input单选框组件的美化)