使用复选框将 Show/Hide 默认为使用纯 CSS 隐藏

Question

我希望 'item value appears here' 在登陆页面或刷新时默认隐藏。我正在使用带有标签的复选框作为 show/hide 单击。这出现在 3 列中，当前单击左列上的 'show' 会显示所有 3 个项目值（这不是问题，因为我不想使用 JavaScript，对此很满意，尽管如果单击on one only unhides one value with 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';
}

非常感谢

Answer 1

将
<input id="checkbox-privacymode" type="checkbox">
改为
<input id="checkbox-privacymode" type="checkbox">
您需要重新定位您的 HTML 元素，以便消息紧跟在复选框之后。
一旦消息在 HTML 代码中正确定位，在 CSS 中您可以 select 消息如下：

#checkbox-privacymode:checked + p {
   display: none;
}

使用复选框将 Show/Hide 默认为使用纯 CSS 隐藏

Defaulting Show/Hide to Hide with pure CSS using checkbox

css

checkbox

show-hide