Включить эту снимок на этой странице флажок аккордеон?

Question

Я пытаюсь создать фильтр для веб-сайта, я сделал аккордеон с помощью проверки коробками, и я хотел бы поставить флажки в нем с помощью

<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; 
}  

DEMO здесь: http://codepen.io/anon/pen/gPdzWK

Answer 1

Так у вас есть линия #accordion input { display: none }, это будет скрыть все input у вас есть.

Если вы хотите, чтобы отобразить input в form и скрыть другие те, которые вы можете сделать: #accordion > div > input { display: none } который выбирает input, который является прямым потомком div, который сам по себе является прямым потомком #accordion.