Question

我有一个问题，我尝试使用新类设置样式化复选框，以便此复选框显示的布局与＆＃34;原始＆＃34;不同。风格一个。

原作如下：

   <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>

＆＃34;原创＆＃34;的CSS代码：

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: "\2713";
    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>

新Box的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: "\2713";
    color:black;
    font-size: 11pt;
}

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

Answer 1

我自己找到了解决方案......但很快...... 我刚刚在输入字段中添加了一个新类：

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

并且以与＃34; orignal＆＃34;相同的方式设计新课程。类：

input[type=checkbox]:checked + .checkbox:before, .check_details:checked + .checkbox_details:before {
    content: "\2713";
    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>

样式复选框不显示检查 - 使用另一个类

2 个答案: