如何使用 CSS 自定义复选框？

Question

我正在尝试使用 CSS 设置多个复选框的样式，但只有一个有效。我的代码有什么问题？我想为复选框设置唯一的 id，但这里的 CSS 似乎不允许这样做。

我有一个多复选框，当我点击第三个复选框时，第一个复选框被激活。或检查。

刀片

@foreach($colors as $color)
    <label for="rules" class="checkbox">
        <input type="checkbox" id="rules">
        <span class="checkmark" style="background-color: {{ $color->color_code }}"></span>
    </label>
@endforeach

CSS

.checkbox {
    position: relative;
}
.checkbox input {
    display: none;
}
.checkbox .checkmark {
    height: 25px;
    width: 25px;
    display: block;
}
.checkbox .checkmark::after {
    content: " ";
    position: absolute;
    width: 5px;
    box-sizing: content-box;
    display: none;
    height: 10px;
    border: solid white;
    top: 3px;
    right: 7px;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.checkbox input:checked ~ .checkmark::after {
    display: block;
}

Answer 1

替换这个

@foreach($colors as $color)
    <label for="color_id{{ $color->id }}" class="checkbox" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $color->color_name }}">
        <input type="checkbox" id="color_id{{ $color->id }}" name="color_id">
        <span class="checkmark" style="background-color: {{ $color->color_code }}"></span>
    </label>
@endforeach