纯css实现互动清单

最新推荐文章于 2022-03-15 21:42:17 发布

weixin_34238642

最新推荐文章于 2022-03-15 21:42:17 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/iriliguo/p/6807631.html

版权

如图，点击每条信息可以实现删除这条信息的效果。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cb {
            display: none;
        }
        .mark {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
        }
    .mark:before {
    content: "";
    display: none;
    position: absolute;
    top:50%;
    left: 25%;
    height: 4px;
    width: 8px;
    border: solid black;
    border-width: 0 0 4px 4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}/*画√，这是呈现在页面的钩钩*/
        .cb:checked~ .mark:before {
            display: block;
        }
        .cb:checked~ .con {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<fieldset>
    <label>
        <input type="checkbox" class="cb" checked>
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
<br>
    <label>
        <input type="checkbox" class="cb">
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
    <br>
    <label>
        <input type="checkbox" class="cb">
        <span class="mark"></span>
        <span class="con">this is a test</span>
    </label>
</fieldset>
</body>
</html>