css3模拟复选框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/79739388

css：

<style>
.xieyi input{
	display: none;
	outline: none;
}
.xieyi label{
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid #000;
	position: relative;
	border-radius: 3px;
}
input:checked+label{/*当复选框选的的时候改变边框色*/
	border-color: #dd5541;
}
input:checked+label:before{
	content: '';
	display: inline-block;
	width: 2px;
	height: 8px;
	background: #dd5541;
	transform:rotate(-30deg);
	position: absolute;
	top: 1px;
	left: 0;
}
input:checked+label:after{
	content: '';
	display: inline-block;
	width: 2px;
	height: 12px;
	background: #dd5541;
	transform:rotate(30deg);
	position: absolute;
	top: -2px;
	left: 5px;
}
</style>

html:

<div class="xieyi">
  		<input type="checkbox" id="check">
  		<label for="check"></label><!--input的id可以和label的for相互绑定-->
  	</div>

另一种：

css：

<style>
label{
	float: left;
	margin: 0 5px;
	overflow: hidden;
}
label input{
	display: none;
}
span{
	float: left;
	width: 50px;
	height: 50px;
	border: 3px solid #000;
}
/*input:checked~span{/* ~ + 都可以*/
	background: red;
}*/
input:checked+span{ /*推荐*/
  background: url(binggou.png) no-repeat center;
  background-size: 30px;
}
</style>

html:

<label>
  	<input type="radio" name="tab"/>
  	<span></span>
  </label>
   <label>
  	<input type="radio" name="tab"/>
  	<span></span>
  </label>
   <label>
  	<input type="radio" name="tab"/>
  	<span></span><!--name值一样就只能选择一个、选一个的用radio-->  
  </label>