在复选框手风琴中使用复选框？答案

【问题标题】：Using a checkbox within an checkbox accordion?在复选框手风琴中使用复选框？
【发布时间】：2016-02-04 12:12:04
【问题描述】：

我正在尝试为网站创建一个过滤器，我使用复选框制作了一个手风琴，我想使用

在其中放置复选框

<input name="name" value="value" type="checkbox"/>

但是复选框本身不会显示。

代码如下：

<div id="container">
    <section id="accordion">
        <div>
            <input type="checkbox" id="check-1" />
            <label for="check-1">Continent</label>                  
                <form action="">
                    Europe<input name="animal" value="Cat" type="checkbox"/> 
                </form>                 
        </div>
        <div>
            <input type="checkbox" id="check-2" />
            <label for="check-2">Country</label>
                <form action="">
                    UK<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>
        <div>
            <input type="checkbox" id="check-3" />
            <label for="check-3">League / Competition</label>
            <form action="">
                        Premier League<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>
        <div>
            <input type="checkbox" id="check-4" />
            <label for="check-4">Date</label>
            <form action="">
                        march 13th<input name="animal" value="Cat" type="checkbox"/> 
                </form>
        </div>


    </section>

和 CSS：

* {
    font-family: Arial, sans;
    margin: 0;
    padding: 0;
}

h1, h2 {
    margin: 1em 0 0 0;
    text-align:left;
}

h2 {
    margin: 0 0 1em 0;
}

#container {
    margin: 10px;
    width: 20%;
}
#accordion input {
    display: none;
}

#accordion label {
    background: #eee;
    border-radius: .25em;
    cursor: pointer;
    display: block;
    margin-bottom: .125em;
    padding: .25em 1em;
    z-index: 20;
}

#accordion label:hover {
    background: #ccc;
}

#accordion input:checked + label {
    background: #ccc;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: white;
    margin-: 0;
}

#accordion form{
    background: #f7f7f7;
    height:0px;
    overflow:hidden;
    z-index:10;
}

#accordion from input{
    padding: 1em;
}

#accordion input:form {
}

#accordion input:checked ~ form {
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    height: auto;
    margin-bottom: .125em;
}

在这里演示：http://codepen.io/anon/pen/gPdzWK

【问题讨论】：

根据您的回答解决了问题，而不是删除或更改此问题，我补充说：#accordion div form input{ display:inline; }

标签： html css checkbox accordion

【解决方案1】：

所以你有一行#accordion input { display: none }，这将隐藏你所有的inputs。

如果您只想在form 中显示input 并隐藏其他您可以执行的操作：#accordion > div > input { display: none } 选择input 是div 的直接子代div #accordion 的孩子。

【讨论】：