CSS3案例-自定义radio、checkbox

自定义radio多选按钮

<div class="radio-wrap">
	<div class="radio-box">
		<input type="radio" id="male" name="sex" value="male" checked="checked" />
		<label for="male" class="fa fa-mars male"></label>
	</div>
	<div class="radio-box">
		<input type="radio" id="female" name="sex" value="female" />
		<label for="female" class="fa fa-venus female"></label>
	</div>
</div>

div {
	box-sizing: border-box;
}
.radio-wrap {
	width: 100px;
	height: 50px;
}
.radio-wrap .radio-box {
	float: left;
	position: relative;
	width: 50px;
	height: 50px;
}
.radio-wrap .radio-box label {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	background-color: #ddd;
	border-radius: 50%;
	box-shadow: 1px 3px 3px #ccc;
	text-align: center;
	line-height: 30px;
	color: #fff;
}
.radio-wrap .radio-box input[type="radio"] {
	visibility: hidden;
}
.radio-wrap .radio-box input[type="radio"]:checked + label.male {
	background-color: #add8e6;
}
.radio-wrap .radio-box input[type="radio"]:checked + label.female {
	background-color: #d8bfd8;
}

仿IOS switch开关

 -> 

点击按钮后是整个label一起移动，然后给label加过渡即可

<div class="wrap">
	<div class="switch-box" >
		<input type="checkbox" id="switch" />
		<label for="switch" class="switch">
			<!-- 小圆圈 -->
			<span class="round"></span>
		</label>
	</div>
</div>

.wrap {
	width: 350px;
	height: 200px;
	margin: 200px auto;
}
.switch-box {
	position: relative;
	width: 350px;
	height: 200px;
	border-radius: 100px;
	background-color: #77d672;
	border: 3px solid #ddd;
	overflow: hidden;
}
/*label是白色的底子，点击之后整个label移动*/
.switch-box .switch {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 96px;
	box-sizing: border-box;
	cursor: pointer;
	transition: all .2s;
}
.switch-box .switch .round {
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 194px;
	height: 194px;
	box-shadow: 0 0 10px #ccc;
	background-color: #fff;
	border-radius: 50%;
}
.switch-box input[type="checkbox"] {
	visibility: hidden;
}
.switch-box input[type="checkbox"]:checked + label {
	left: 150px;
	background-color: #77d672;
}

自定义checkbox多选按钮

实现如下图效果：选框选中后出现打钩动画

 -> 

<div class="wrap">
	<div class="check-box">
		<input type="checkbox" id="checkBox" />
		<label for="checkBox"></label>
	</div>
</div>

将label和checkbox相关联，然后在label上做文章即可

√用微元素拼接的方法，由于伪元素有天然的层级，before在after下面，所以用before做长边。先画好静态元素再用动画即可，transition和animation都可。

还要注意的是transform-origin，由于打钩是从左往右打的（笔画顺序），所以不能以默认的center center作为原点，否则会从中间开始往两边画。

body {
	background-color: #678;
}
div {
	display: flex;
	box-sizing: border-box;
}
.wrap {
	margin: 100px auto;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
}
.check-box {
	width: 150px;
	height: 150px;
}
.check-box input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}
.check-box label {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 15px solid #333;
	box-sizing: border-box;
	border-radius: 5px;
}
.check-box label::before,
.check-box label::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 0;
	background-color: #34ab19;
	border-radius: 5px;
	/*transform-origin决定了变化的方式，如果是以中间为原点，就会以中间慢慢向外扩大*/
	/*以左边为原点，就会从左端开始变化*/
	transform-origin: left top;
}
/*伪元素有天然的层级，before在after下面，before做长边，after做短边*/
.check-box label::before {
	opacity: 0;
	top: 123px;
	left: 62px; 
	/*height: 160px;*/
	/*用阴影模拟边框*/
	box-shadow: 0 0 0 3px #678;
	transform: rotate(-135deg);
}
.check-box label::after {
	opacity: 0;
	top: 80px;
	left: 20px; 
	/*height: 50px;*/
	transform: rotate(-45deg);
}
.check-box input[type="checkbox"]:checked + label {
	border-color: #36ab10;
}
.check-box input[type="checkbox"]:checked + label::before {
	opacity: 1;
	height: 160px;
	transition: height .2s linear .2s;
}
.check-box input[type="checkbox"]:checked + label::after {
	opacity: 1;
	height: 60px;
	transition: height .2s linear;
}