css3实现checkbox变开关按钮

css3实现checkbox变按钮

 

 

html 如下

<!DOCTYPE HTML>
<html>
	<head>
		<title>css3实现checkbox变按钮 </title>
	</head>
<body>
	<div class='search_checkbox'>高级检索：
		<input type='checkbox' id= 'switch'>
		<label for='switch'>高级检索</label>
	</div>
</body>
</html>

　　css如下

 .search_checkbox{
	margin: 0;
	padding: 0;
	margin-left: 15px;
	display: inline-block;
	height: 30px;
	padding-top: 12px;
}
.search_checkbox input[type=checkbox]{
	height: 0px;
	width: 0px;
	visibility: hidden;
}
.search_checkbox label{
	cursor: pointer;
	height: 20px;
	border-radius: 10px;
	display: inline-block;
	background-color: gray;
	width: 40px;
	text-indent: -99999px;
	position: relative;
}
.search_checkbox label::before {
	content: '';
	display:inline-block;
	background-color: white;
	height: 15px;
	width: 15px;
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	border-radius: 7px;
	transition:0.3s;
}
.search_checkbox input:checked + label {
  background: #bada55;
}
.search_checkbox input:checked + label:before {
  left: calc(100% - 2.5px);
  transform: translateX(-100%);
}
.search_checkbox label:active:before{
	width:20px;
}

　　

如有疑问请回复。

posted @ 2017-04-27 23:28  羊示子木  阅读(2654)  评论(2)    收藏  举报