css3實現checkbox變開關按鈕

時間 2019-11-13

標籤 css3 css 實現 checkbox 開關按鈕欄目 CSS 简体版

原文原文鏈接

css3實現checkbox變按鈕css

html 以下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以下css3

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

若有疑問請回復。
orm

相關標籤/搜索

recyclerview+checkbox

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。