样式化的复选框不显示检查 - 与另一个 class

Question

我有一个问题，我试图用一个新的 class 设置一个样式化的复选框，因此这个复选框的布局与 "original" 样式化的复选框不同。

原文是这样的：

   <label for="bauherr_check">Bauherr</label>
   <input id="bauherr_check" name="zielgruppen_check[]" value="bauherr_check" type="checkbox">
   <label class="checkbox" for="bauherr_check">
    ::before
   </label>

CSS为"original"代码：

input[type=checkbox] {
    display:none;
}

.checkbox:before {
    content: "";
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #AAAAAA;
    border-left: 1px solid #AAAAAA;
    border-radius: 1px;
}

input[type=checkbox]:checked + .checkbox:before  {
    content: "13";
    color:black;
    font-size: 11pt;
}

新的有以下代码

<label class="label_details" for="sichtbar_check">Sichtbar?</label>
<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">
<label class="checkbox_details" for="sichtbar_check">
::before
</label>

新盒子的CSS：

.checkbox_details:before {
content: "";
width: 12px;
height: 12px;
display: flex;
align-items: center;
background-color: #ffffff;
border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-radius: 1px;
margin-left:-5px;
}
input[type=checkbox].check_details:checked + .checkbox_details:before  {
    content: "13";
    color:black;
    font-size: 11pt;
}

为什么我一勾选第二个框就没有显示勾选符号（内容）？也许有人可以帮忙？非常感谢。

Answer 1

我自己找到了解决方案……虽然很快…… 我刚刚在输入字段中添加了一个新的 class：

<input class="togglerIn" id="sichtbar_check" name="sockel_check[]" value="sichtbar_check" type="checkbox">

新 class 的样式与 "orignal" class 相同：

input[type=checkbox]:checked + .checkbox:before, .check_details:checked + .checkbox_details:before {
    content: "13";
    color:black;
    font-size: 11pt;
}

这样一来，内容就会在我选中该框时立即出现。

Answer 2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>

        .checkbox:checked:before {
            transform: rotate(-45deg);
            height: .5rem;
            border-color: #009688;
            border-top-style: none;
            border-right-style: none;
        }

        .label-checkbox {
            position: relative;
            margin: .5rem;
            font-family: Arial, sans-serif;
            line-height: 135%;
            cursor: pointer;
        }

        .checkbox {
            margin: 0 1rem 0 0;
            cursor: pointer;
        }

        .checkbox:before {
            content: "";
            position: absolute;
            z-index: 1;
            width: 1rem;
            height: 1rem;
            top: 0;
            border: 2px solid green;
        }

        .checkbox:checked :before {
            height: .5rem;
            border-color: green;
            border-top-style: none;
            border-right-style: none;
        }

        .checkbox:after {
            content: "";
            position: absolute;
            top: rem(-2);
            left: 0;
            width: 1.1rem;
            height: 1.1rem;
            background: #fff;
            cursor: pointer;
        }

    </style>

</head>

<body>
    <label class="label-checkbox">
        <input type="checkbox" class="checkbox"> Item 4
    </label>
</body>

</html>

样式化的复选框不显示检查 - 与另一个 class

styled checkbox does not show check - with another class

css

checkbox

stylesheet