CSSでメニューにチェックマークを実装するにはどうすればよいですか? （コード）-CSSチュートリアル-php.cn

CSSでメニューにチェックマークを実装するにはどうすればよいですか? （コード）

不言

リリース： 2018-08-09 16:51:50

オリジナル

3042 人が閲覧しました

この記事の内容はCSSでメニューにチェックマークを実装する方法についてです。（コード）、それは特定の参考値を必要としている友人がそれを参照できることを願っています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>:after :before</title>
    <style>
    li {
        list-style-type: none;
        position: relative;
        margin: 2px;
        padding: 0.5em 0.5em 0.5em 2em;
        background: lightgrey;
        font-family: sans-serif;
    }
    
    li.done {
        background: #CCFF99;
    }
    
    li.done::before {
        content: &#39;&#39;;
        position: absolute;
        border-color: #009933;
        border-style: solid;
        border-width: 0 0.3em 0.25em 0;
        height: 1em;
        top: 1.3em;
        left: 0.6em;
        margin-top: -1em;
        transform: rotate(45deg);
        width: 0.5em;
    }
    </style>
</head>

<body>
    <ul>
        <li>Buy milk</li>
        <li>Take the dog for a walk</li>
        <li>Exercise</li>
        <li>Write code</li>
        <li>Play music</li>
        <li>Relax</li>
    </ul>
</body>
<script>
var list = document.querySelector(&#39;ul&#39;);
list.addEventListener(&#39;click&#39;, function(ev) {
    if (ev.target.tagName === &#39;LI&#39;) {
        ev.target.classList.toggle(&#39;done&#39;);
    }
}, false);
</script>

</html>

ログイン後にコピー

効果は次のとおりです:

キーCSS:

li.done::before {
    content: &#39;&#39;;
    position: absolute;
    border-color: #009933;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 1.3em;
    left: 0.6em;
    margin-top: -1em;
    transform: rotate(45deg);
    width: 0.5em;
}

ログイン後にコピー

*ブートストラップ下向きの三角形はドロップダウンメニューに使用されます

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}

ログイン後にコピー