Skip to content

多选框改变状态颜色跟着变化

css:

<style type="text/css">
		label span{
			/*border:1px solid black;*/
			display:inline-block;
			background-color:red;
			width:50px;
			height:50px;
			border-radius:50%;
			text-align:center;
			line-height:50px;
			cursor:pointer;
		}
		label input{
			height:0;
			width:0;
		}
		input:checked + span{
			color:#fff;
			background-color: green;
		}
	</style>

html:

	<label>
		<input type="checkbox" name="">
		<span>1</span>
	</label>
	<label>
		<input type="checkbox" name="">
		<span>2</span>
		
	</label>
	<label>
		<input type="checkbox" name="">
		<span>3</span>
	</label>

记住span要放在input的后面