Радио-кнопка не работает внутри css accordion

Question

У меня есть радиокнопка внутри аккордеона css, и по какой-то причине она не работает. Может быть, css, который я использую для аккордеона, переопределяет переключатель? возможно, потому что аккордеон сделан из флажка, который вызывает проблемы? Я также поставил управления додзё в гармошку, а некоторые работы, некоторые из них не Ниже приведен код: Первая кнопка радио вне аккордеона работает отлично

HTML:

<input type="radio" name="colors" value="green" />Green <!--this works fine--> 
<input type="radio" name="colors" value="red" />Red 
<section id="accordionMTF"> 
    <div> 
     <div style="width: 450px; 
           height: 80px"></div> 
     <input type="checkbox" id="checkMTF-1" checked="checked" /> 
     <label for="checkMTF-1">Input System Info</label> 
     <article> 
      <input type="radio" name="colors" value="green" />Green <!--this doesnt work--> 
      <input type="radio" name="colors" value="red" />Red</article> 
    </div> 
    <div> 
     <input type="checkbox" id="checkMTF-2" /> 
     <label for="checkMTF-3">Input Marking Information</label> 
     <article> 
      <p style="width: 450px; 
           height: 400px">Fill out form</p> 
     </article> 
    </div> 
    <div> 
     <input type="checkbox" id="checkMTF-3" /> 
     <label for="checkMTF-4">Complete and Submit</label> 
     <article> 
      <p style="width: 450px; 
           height: 400px">Fill out form</p> 
     </article> 
    </div> 
</section> 

CSS: /Марк Форма билета Аккордеон/

#accordionMTF input { 
     display: none; 
    } 
    #accordionMTF label { 
     background: #eee; 
     border-radius: .25em; 
     cursor: pointer; 
     display: block; 
     margin-bottom: .125em; 
     padding: .25em 1em; 
     z-index: 20; 
    } 
    #accordionMTF label:hover { 
     background: #ccc; 
    } 
    #accordionMTF input:checked + label { 
     background: #ccc; 
     border-bottom-right-radius: 0; 
     border-bottom-left-radius: 0; 
     color: white; 
     margin-bottom: 0; 
    } 
    #accordionMTF article { 
     background: #f7f7f7; 
     height:0px; 
     overflow:hidden; 
     z-index:10; 
    } 
    #accordionMTF article p { 
     padding: 1em; 
    } 
    #accordionMTF input:checked article { 
    } 
    #accordionMTF input:checked ~ article { 
     border-bottom-left-radius: .25em; 
     border-bottom-right-radius: .25em; 
     height: auto; 
     margin-bottom: .125em; 
    } 

у меня есть скрипка: here

Благодаря

Answer 1

Разработчик вы аккордеон решил скрыть все входы

#accordionMTF input { 
    display: none; 
} 

Более разумный подход был бы дать входы, которые необходимы для функциональности аккордеона класса (.hidden), и использовать его как селектор, а не одеяло, спрятав все входы:

<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" /> 

.hidden { 
    display: none; 
} 

WORKING EXAMPLE

Answer 2

вот почему: (!?)

accordionMTF input { 
     display: none; 
    } 

Answer 3

До тех пор, пока вы продолжаете использовать ту же структуру HTML, все, что вам нужно сделать, это переработать ваш CSS немного. Последующий CSS

#accordionMTF input { 
    display: none; 
} 

должен выглядеть как этот

#accordionMTF > div > input[type='checkbox'] { 
    display : none; 
} 

Это отличная попытка создать аккордеон без JavaScript. Вы также можете рассмотреть возможность включения анимации CSS3.

Существует также ошибка, когда ваши метки имеют неправильное значение атрибута for.

Вот рабочая скрипку http://jsfiddle.net/czo2m22s/21/