如何仅用CSS和HTML实现带自定义复选框的列表式分类选择菜单

我需要制作一个隐藏的上下文菜单，用于展示多分类选择功能，同时自定义input复选框的样式。预期效果是复选框与分类文字正常排版，但当用label包裹复选框和文字后布局出现异常。尝试过调整position: relative/absolute、display: flex/inline-block以及宽高属性，问题仍未解决。要求仅用CSS和HTML，通过无序列表实现带标签的自定义复选框输入。

当前代码 #

HTML代码

<div class="col-md-12 col-lg-4 text-lg-right mt-md-4 mt-lg-0">
    <div class="d-flex-column w-100" id="genre-bar">
        <!-- always visible selections bar -->
        <div class="row">
            <div class="col-12 mb-3 d-flex text-align-right">
                <span class="w-100 genre-bar-display text-align-right align-items-center"><i class="fas fa-chevron-down"></i></span>
            </div>
        </div>
        <div class="genre-hidden-section px-3">
            <!-- Multiple selector -->
            <div class="row">
                <div class="col-6 text-left">
                    <ul id="first-genre-list" class="genre-list">
                         <!-- This is populated by the @foreach below using JS -->
                    </ul>
                </div>
                <div class="col-6 text-left">
                    <ul id="second-genre-list" class="genre-list">
                    <!-- This is populated by the @foreach below using JS -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- This div gets emptied and removed by JS immediately -->
    <div id="select-close-books-genre" style="display:none">
        <ul>
            @foreach (GenreModel genre in Model.Genres)
            {
                <li class="genre-checkbox-container">
                    <label>
                        @genre.Name
                        <span class="genre-checkmark"></span>
                        <input type="checkbox" value="@genre.Id">
                    </label>
                </li>
            }
        </ul>
    </div>
</div>

CSS代码

li input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.genre-checkmark {
    display: inline-block;
    top: 0;
    left: 0;
    height: 13px;
    width: 13px;
    border: 1px black solid;
    border-radius: 3px;
    background-color: white;
}

.genre-list {
    display:flex;
    flex-wrap:wrap;
}

.genre-checkbox-container {
    flex-grow: 1;
}

.genre-checkbox-container:hover span {
    background-color: #ccc;
}

.genre-checkbox-container input:checked ~ .genre-checkmark {
    background-color: #30d9c8;
}

JS代码

const genreListDiv = $("#select-close-books-genre")[0];
const genreList = Array.from(genreListDiv.firstElementChild.children);
genreListDiv.remove();
console.log(genreList)
for (let i = 0; i < genreList.length/2; i++) {
    $('#first-genre-list')[0].appendChild(genreList[i]);
};
for (let i = Math.ceil(genreList.length/2); i < genreList.length; i++) {
    $('#second-genre-list')[0].appendChild(genreList[i]);
};

// Open and close the genre selector box
$("#genre-bar").on('click', function(event) {
    $("#genre-bar").addClass("genre-bar-open");
    $('body').on('click', function () {
        $('#genre-bar').removeClass("genre-bar-open");
    });
    $('#genre-bar').on('click', function (event) {
        event.stopPropagation();
    });
});

解决方案 #

核心问题在于label内元素的顺序和布局对齐，以下是修改步骤：

1. 调整HTML结构（label内元素顺序）

把input放到label最前面，确保CSS兄弟选择器能正确匹配选中状态；同时给input和label添加关联的id与for属性，提升可访问性：

<li class="genre-checkbox-container">
    <label for="genre-@genre.Id">
        <input type="checkbox" id="genre-@genre.Id" value="@genre.Id">
        <span class="genre-checkmark"></span>
        @genre.Name
    </label>
</li>

2. 修正CSS布局与选择器

调整label的布局方式，解决复选框与文字的对齐问题，同时优化列表样式：

/* 隐藏原生复选框 */
li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 自定义复选框样式 */
.genre-checkmark {
    display: inline-block;
    height: 13px;
    width: 13px;
    border: 1px solid #000;
    border-radius: 3px;
    background-color: #fff;
    flex-shrink: 0; /* 防止复选框在flex布局中被压缩 */
}

/* 列表容器：清除默认样式，保持flex布局 */
.genre-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 每个选项容器 */
.genre-checkbox-container {
    flex-grow: 1;
    margin: 4px 0;
}

/* label布局：让复选框与文字垂直对齐，点击整个区域触发复选框 */
.genre-checkbox-container label {
    display: flex;
    align-items: center;
    gap: 6px; /* 复选框与文字的间距 */
    cursor: pointer;
}

/* hover状态 */
.genre-checkbox-container:hover .genre-checkmark {
    background-color: #ccc;
}

/* 选中状态：input在checkmark前面，兄弟选择器可正确匹配 */
.genre-checkbox-container input:checked ~ .genre-checkmark {
    background-color: #30d9c8;
}

说明

• 调整input位置后，input:checked ~ .genre-checkmark能正确选中复选框元素，因为CSS兄弟选择器仅能选择当前元素之后的同辈元素。
• label使用flex布局后，可轻松实现复选框与文字的垂直对齐，同时整个label区域都能触发复选框状态切换。
• 清除列表默认的padding和margin，避免不必要的布局偏移。

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