Я хочу, чтобы «значение элемента отображается здесь» по умолчанию было скрыто при переходе на страницу или обновлении. Я использую флажок с меткой, которая будет использоваться при щелчке мышью по отображению / скрытию. Он отображается в 3 столбцах, и в настоящее время нажатие кнопки «показать» в левом столбце приводит к появлению всех трех значений элементов (это не проблема, и, поскольку я не хочу использовать JavaScript, я доволен этим, хотя при нажатии на один отображается только одно значение с css тогда я весь уши!).

Я не могу использовать JavaScript и считаю, что должен быть способ сделать это с помощью CSS, используя флажки - любая помощь будет принята с благодарностью!

 <div class="key-items-wrapper">
       <div class="left-column">
               <img src="/images/item.png"> 
                    <div class="center-column-text">
                         <p>item name</p>
                           <div class="content">
                                 <p>item value appears here</p>                            
                                </div>                        
                                    <input id="checkbox-privacymode" type="checkbox"> 
                                    <label for="checkbox-privacymode"></label>
                        </div>
                </div>

Это код для флажка

 #checkbox-privacymode {
    display: none;
    visibility:hidden;
}

#checkbox-privacymode + label {
    display: block;
    padding-right: 52px;
    height: 35px;
    background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
    float: right;
    font-size: 0.9em;
    color: #777;
    cursor: pointer;
}

#checkbox-privacymode + label::before {
    content: 'hide';
}

#checkbox-privacymode:checked + label {
    background-image: url(/images/eye.png);
    display:block;
}

#checkbox-privacymode:checked + label::before {
    content: 'show';
}

Огромное спасибо

0
SWeinstein 20 Фев 2021 в 21:28

1 ответ

Лучший ответ
  1. Измените
    <input id="checkbox-privacymode" type="checkbox">
    на
    <input id="checkbox-privacymode" type="checkbox">

  2. Вам нужно будет переместить ваши HTML-элементы так, чтобы сообщение было сразу после флажка.

  3. Как только сообщение будет правильно размещено в HTML-коде, в CSS вы можете выбрать его следующим образом:

#checkbox-privacymode:checked + p {
   display: none;
}
0
soorajgupta 21 Фев 2021 в 03:04