флажок в стиле не показывает проверку - с другим классом - PullRequest
Новая
       5

флажок в стиле не показывает проверку - с другим классом

0 голосов
/ 27 мая 2018

У меня есть проблема, из-за которой я попытался установить стилизованный флажок с новым классом, чтобы этот флажок отображался с макетом, отличным от «оригинального» стиля.

Оригинал выглядит следующим образом: 

   <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 для «оригинального» кода: 

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>

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

Почему во втором поле не отображается символ галочки (содержимое), как только я отмечаю этот флажок?Может быть, кто-то может помочь?Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 27 мая 2018 
<!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>
0 голосов
/ 27 мая 2018

Я нашел решение сам ... довольно быстро, хотя .... Я просто добавил новый класс в поле ввода: 

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

И стилизовал новый класс так же, как "orignal "class: 

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

Таким образом, содержимое появляется, как только я отмечаю флажок.

...