时间戳

首页 > 解决方案 > 使用复选框默认显示/隐藏以使用纯 CSS 隐藏

css - 使用复选框默认显示/隐藏以使用纯 CSS 隐藏

问题描述

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

非常感谢

标签： csscheckboxshow-hide

解决方案

  1. 更改
    <input id="checkbox-privacymode" type="checkbox">
    为
    <input id="checkbox-privacymode" type="checkbox">

  2. 您将需要重新定位您的 HTML 元素，以便消息紧跟在复选框之后。

  3. 消息在 HTML 代码中正确定位后，在 CSS 中，您可以像这样选择消息：

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

推荐阅读