Comment implémenter une coche dans le menu avec CSS ? (code)-tutoriel CSS-php.cn

Comment implémenter une coche dans le menu avec CSS ? (code)

不言

Libérer： 2018-08-09 16:51:50

original

3042 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter des coches dans le menu avec CSS ? (code), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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

Copier après la connexion

L'effet est le suivant :

Clé 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;
}

Copier après la connexion

* Le triangle descendant bootstrap est utilisé pour le menu déroulant

.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;
}

Copier après la connexion

Recommandations associées :

Propriété CSS3 : Comment utiliser l'ombre de texte text-shadow

Comment utiliser le CSS pour que les images aient un effet tridimensionnel sur la page (Code test actuel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!