Demo 1: Todo List (Toggle Attribute)

• ← to index
• CSS Toggles
• Toggle Attribute
• Aria Toggles

How

Add a toggle attribute on each item. Optionally add a toggle-name attribute to set the name.

It’s preferred to use a button for a toggle, though. For that, use <button type="toggle">

Code

<ul class="todo">
    <li toggle>write an explainer</li>
    <li toggle>draft a specification</li>
    <li toggle>create a polyfill</li>
    <li toggle>make a demo page</li>
</ul>

.todo li {
    list-style-type: '❌';
}

.todo li:toggle() {
    list-style-type: '✅';
}

Demo (by Bramus)