純css實現互動清單 - iriliguo－IT工程師數位筆記本

文章出處

如圖，點擊每條信息可以實現刪除這條信息的效果。

<!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>