首页 > Web开发 > 详细

css3实现checkbox变按钮

时间:2017-04-27 23:55:48      阅读:429      评论:0      收藏:0      [点我收藏+]

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;
}

  


如有疑问请回复。

css3实现checkbox变按钮

原文:http://www.cnblogs.com/ivanlee-ee-233/p/6777833.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!