如何仅使用HTML和CSS实现类Vuetify风格的chip group组件

实现效果参考：Chip Group筛选效果参考图
核心实现完全基于原生CSS特性，无需引入JavaScript：

• 复用原生checkbox的选中能力，通过:checked伪类切换选中/未选中样式
• 隐藏原生checkbox默认渲染样式，自定义胶囊形状、配色、交互反馈
• 采用flex布局实现chips自动换行、均匀间距

你原有代码结构是可行的，注意移除Vue专属的动态绑定语法（:for、:id）替换为原生HTML属性即可，完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Roboto, sans-serif;
        }
        .demo-wrap {
            padding: 2rem;
        }
        /* Chip组容器 */
        .chips-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }
        /* 单个Chip标签样式 */
        .single-chip label {
            display: inline-flex;
            align-items: center;
            position: relative;
            padding: 0.4rem 0.9rem;
            border: 1px solid #e0e0e0;
            border-radius: 999px;
            cursor: pointer;
            font-size: 0.875rem;
            color: rgba(0,0,0,0.87);
            background: #fff;
            transition: all 0.2s ease;
            user-select: none;
        }
        /* 隐藏原生默认checkbox */
        .single-chip input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        /* 未选中态hover效果 */
        .single-chip label:hover {
            background-color: rgba(0,0,0,0.04);
        }
        /* 选中态样式 */
        .single-chip:has(input:checked) label {
            background-color: #1976d2;
            border-color: #1976d2;
        }
        .single-chip input:checked + span {
            color: #fff;
        }
        /* 选中态hover效果 */
        .single-chip:has(input:checked) label:hover {
            background-color: #1565c0;
            border-color: #1565c0;
        }
        /* 键盘操作无障碍聚焦样式 */
        .single-chip input:focus-visible + span {
            outline: 2px solid #90caf9;
            outline-offset: 2px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="demo-wrap">
        <div class="chips-group">
            <div class="single-chip">
                <label for="chip-work">
                    <input type="checkbox" name="filter" id="chip-work" value="work"/>
                    <span>工作</span>
                </label>
            </div>
            <div class="single-chip">
                <label for="chip-personal">
                    <input type="checkbox" name="filter" id="chip-personal" value="personal"/>
                    <span>个人事务</span>
                </label>
            </div>
            <div class="single-chip">
                <label for="chip-done">
                    <input type="checkbox" name="filter" id="chip-done" value="done"/>
                    <span>已完成</span>
                </label>
            </div>
            <div class="single-chip">
                <label for="chip-pending">
                    <input type="checkbox" name="filter" id="chip-pending" value="pending"/>
                    <span>待处理</span>
                </label>
            </div>
            <div class="single-chip">
                <label for="chip-overdue">
                    <input type="checkbox" name="filter" id="chip-overdue" value="overdue"/>
                    <span>逾期</span>
                </label>
            </div>
        </div>
    </div>
</body>
</html>

关键实现说明 #

• 样式对齐Vuetify默认chip规格：0.4rem上下内边距、0.875rem字号、999px全圆角、0.5rem元素间距
• 保留原生表单特性：选中值可正常随表单提交、支持键盘Tab切换+空格选中，添加了聚焦态提示满足无障碍要求
• 交互效果和Vuetify一致：0.2s过渡动画、未选中态浅灰hover、选中态主题蓝填充+加深hover效果
• 如需修改主题色，直接替换#1976d2（默认主色）、#1565c0（hover加深色）即可

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