如何用HTML和CSS设置复选框默认选中以初始折叠菜单栏

要实现页面加载时复选框默认选中、菜单初始折叠隐藏的效果，只需做以下两处修改：

1. 给复选框添加默认选中属性 #

在HTML的<input type="checkbox">标签中加入checked属性，让页面加载时复选框自动处于选中状态：

<input type="checkbox" name="" id="toggler" checked>

2. 完善CSS的菜单状态逻辑 #

原来的CSS仅定义了复选框选中时的菜单隐藏样式，需要补充未选中时的菜单显示样式，确保点击切换时能正常展开：

/* 复选框未选中时，菜单正常展开 */
header #toggler:not(:checked) ~ .navbar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* 复选框选中时，菜单折叠隐藏 */
header #toggler:checked ~ .navbar {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header .navbar a {
    display: block;
}

完整代码示例 #

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The CheeseCake Shop</title>
    <link rel="stylesheet" href="style.css">
    <!-- 注：若要显示汉堡图标，需自行引入图标库（如Font Awesome） -->
</head>
<body>
    <header>
        <input type="checkbox" name="" id="toggler" checked>
        <label for="toggler" class="fas fa-bars"></label>
        <nav class="navbar">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#products">Products</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
</body>
</html>

CSS：

/* 复选框未选中时，菜单展开 */
header #toggler:not(:checked) ~ .navbar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* 复选框选中时，菜单折叠隐藏 */
header #toggler:checked ~ .navbar {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header .navbar a {
    display: block;
}

/* 可选：隐藏原生复选框，仅保留汉堡按钮交互 */
header #toggler {
    display: none;
}

header .fas.fa-bars {
    cursor: pointer;
    font-size: 1.5rem;
}

关键说明 #

• checked是HTML原生属性，无需JS就能设置复选框默认选中状态，完全满足仅用HTML+CSS的需求。
• 通过:not(:checked)伪类定义未选中时的菜单样式，配合:checked的隐藏样式，实现点击汉堡按钮切换菜单状态的交互。
• 隐藏原生复选框的样式是优化体验的可选操作，不影响核心功能。

内容的提问来源于stack exchange，提问作者Marco Moldenhauer