html中怎么设置checkbox点击打钩框的背景颜色

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

陶矷
推荐于2017-04-23 · TA获得超过399个赞

知道小有建树答主

回答量：322

采纳率：57%

帮助的人：186万

我也去答题访问个人页

关注

展开全部

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>chec</title>

		<style>
			#container {
				margin: 20px auto;
			}
			
			#container span {
				position: relative;
			}
			
			#container .input_check {
				position: absolute;
				visibility: hidden;
			}
			
			#container .input_check+label {
				display: inline-block;
				width: 16px;
				height: 16px;
				border: 1px solid #fd8845;
			}
			
			#container .input_check:checked+label:after {
				content: "";
				position: absolute;
				left: 2px;
				bottom: 12px;
				width: 9px;
				height: 4px;
				border: 2px solid #fd8845;
				border-top-color: transparent;
				border-right-color: transparent;
				-ms-transform: rotate(-60deg);
				-moz-transform: rotate(-60deg);
				-webkit-transform: rotate(-60deg);
				transform: rotate(-45deg);
			}
		</style>
	</head>

	<body>

		<h3>利用css的：after跟transform属性代替checkbox效果</h3>
		<div id="container">
			<span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>
			<span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>
		</div>
	</body>

</html>
转http://www.tuicool.com/articles/uMzeQf