zoukankan html css js c++ java

伪元素实现多选框选中增加数字

点击多选框统计点击的有多少个，这样的功能一般是由js实现的，原来早有高人利用css实现了这样的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form{counter-reset: num;}
        input:checked{counter-increment: num;}
        .count:before{content: counter(num);color: #f00;}
    </style>
</head>
<body>
    <form>
        <label>香蕉</label>
        <input type="checkbox" name="" id=""><br>
        <label>苹果</label>
        <input type="checkbox" name="" id=""><br>
        <label>雪梨</label>
        <input type="checkbox" name="" id=""><br>
        <label>葡萄</label>
        <input type="checkbox" name="" id=""><br>
    </form>
    <p>你一共选择了<span class="count"></span>种水果</p>
</body>
</html>

查看全文

相关阅读:
F
E
D
B
A
C
I
G
F
架构sass文件

原文地址：https://www.cnblogs.com/11lang/p/7795467.html