css中的计数器counter，以及radio和checkbox中css样式

首先得说明下，真实情况radio和checkbox样式是不可变的，这就矛盾了，一下说可变，一下说不可变。其实呢，都是我们的眼睛欺骗了我们，真正的<input>是已经设为不可见的visibility: visible;，我们是用个替代品代替它的，那就是我们的标记标签<label>了，利用其for属性，就可以了。
另外counter（）呢，就是先创建个计数器咯(随便在那个.class[本人习惯用.class而已]里都可以啦)counter-reset: name;;这就开始计数咯（写触发计数的.class）counter-increment: name;；最后就是输出content: counter(name);。

示例代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS counter()函数与radio,checkbox样式用法</title>
<style>
	
div{
	border: 2px solid chocolate;
	border-radius: 10px;
	margin: 100px auto;
	padding: 10px;
	width: 400px;
}

input{
	visibility: hidden;
}

.counter-reset{
	counter-reset: animal;
}

input:checked{
	counter-increment: animal;
}

span::before{
	content: counter(animal);
}

input:checked + .label1:before{
	visibility: visible;
}

input:checked + .label2:before{
	visibility: visible;
}

label{
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	background-color: #D2691E;
}

.label1{
	border-radius: 5px;
}

.label1:before{
	width: 20px;
	height: 20px;
	content: "\2714";
    color: white;
	text-align: center;
	display: inline-block;
	visibility: hidden;
}

.label2{
	border-radius: 100%;
}

.label2:before{
	width: 10px;
	height: 10px;
	content: "";
	margin: -10px 0 0 5px;
  background-color: white;
	border-radius: 100%;
	display: inline-block;
	visibility: hidden;
}

</style>
</head>
<body>
<div>
	<input id = "first" type="checkbox" />
	<label for="first" class="label1"></label>鸭子
	<input id = "second" type="checkbox" />
	<label for="second" class="label1"></label>狗子
	<input id = "third" type="checkbox" />
	<label for="third" class="label1"></label>猫子
	<input id = "fourth" type="checkbox" />
	<label for="fourth" class="label1"></label>驴子
	<p>您选择了<span></span>种动物！</p>
	<input id="one" type="radio" name="food" />
	<label for="one" class="label2"></label>蔬菜
	<input id="two" type="radio" name="food" />
	<label for="two" class="label2"></label>肉类
	<input id="three" type="radio" name="food" />
	<label for="three" class="label2"></label>水果
	<input id="four" type="radio" name="food" />
	<label for="four" class="label2"></label>杂食
	<p>(单选)您喜欢的食物是？</p>
</div>
</body>
</html>

运行截图：
在这里插入图片描述

菜鸟爬行中…

css中的计数器counter，以及radio和checkbox中css样式

猜你喜欢