使用复选框默认显示/隐藏以使用纯 CSS 隐藏答案

【问题标题】：Defaulting Show/Hide to Hide with pure CSS using checkbox使用复选框默认显示/隐藏以使用纯 CSS 隐藏
【发布时间】：2021-02-21 11:04:46
【问题描述】：

我希望在登陆页面或刷新时默认隐藏“项目值显示在此处”。我正在使用一个带有标签的复选框，用作显示/隐藏单击。这出现在 3 列中，当前单击左列上的“显示”会显示所有 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';
}

非常感谢

【问题讨论】：

标签： css checkbox show-hide

【解决方案1】：

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

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

【讨论】：