在手風琴內添加表格

Question

我目前使用手風琴，我發現。

這裏是CSS：

 .ac-container{ 
      width: 400px; 
      margin: 10px auto 30px auto; 
     } 

     .ac-container label{ 
      font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
      padding: 5px 20px; 
      position: relative; 
      z-index: 20; 
      display: block; 
      height: 30px; 
      cursor: pointer; 
      color: #777; 
      text-shadow: 1px 1px 1px rgba(255,255,255,0.8); 
      line-height: 33px; 
      font-size: 19px; 
      background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
      box-shadow: 
       0px 0px 0px 1px rgba(155,155,155,0.3), 
       1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
       0px 2px 2px rgba(0,0,0,0.1); 
      background: none repeat scroll 0 0 #F8F7F5; 
     } 

     .ac-container label:hover{ 
      background: #fff; 
     } 

     .ac-container input:checked + label, 
     .ac-container input:checked + label:hover{ 
      background: #c6e1ec; 
      color: #3d7489; 
      text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); 
      box-shadow: 
       0px 0px 0px 1px rgba(155,155,155,0.3), 
       0px 2px 2px rgba(0,0,0,0.1); 
     } 

     .ac-container label:hover:after, 
     .ac-container input:checked + label:hover:after{ 
      content: ''; 
      position: absolute; 
      width: 24px; 
      height: 24px; 
      right: 13px; 
      top: 7px; 
      background: transparent url(../images/arrow_down.png) no-repeat center center; 
     } 

     .ac-container input:checked + label:hover:after{ 
      background-image: url(../images/arrow_up.png); 
     } 

     .ac-container input{ 
      display: none; 
     } 

     .ac-container article{ 
      background: rgba(255, 255, 255, 0.5); 
      margin-top: -1px; 
      overflow: hidden; 
      height: 0px; 
      position: relative; 
      z-index: 10; 
      transition: 
       height 0.3s ease-in-out, 
       box-shadow 0.6s linear; 
     } 
     .ac-container input:checked ~ article{ 
      transition: 
       height 0.5s ease-in-out, 
       box-shadow 0.1s linear; 
      box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); 
     } 

     .ac-container article p{ 
      font-style: italic; 
      color: #777; 
      line-height: 23px; 
      font-size: 14px; 
      padding: 20px; 
      text-shadow: 1px 1px 1px rgba(255,255,255,0.8); 
     } 

     .ac-container input:checked ~ article.ac-small{ 
      height: 440px; 
     } 
     .ac-container input:checked ~ article.ac-medium{ 
      height: 180px; 
     } 
     .ac-container input:checked ~ article.ac-large{ 
      height: 230px; 
     } 

這裏是HTML代碼：

 <section class="ac-container">  
      <div> 
       <input id="ac-1" name="accordion-1" type="checkbox" /> 
       <label for="ac-1">Available options </label> 
       <article class="ac-small"> 
       <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> 
        <div align="center"><br> 
        <input type="radio" name="group1" value="Milk"> Milk<br> 
        <input type="radio" name="group1" value="Butter" checked> Butter<br> 
        <input type="radio" name="group1" value="Cheese"> Cheese 
        </div> 
       </form> 
       </article> 
      </div> 
      <div><!--...--></div> 
     </section> 

不幸的是，我無法看到裏面手風琴的單選按鈕（當我下拉「可用選項「），但我可以看到這些項目。我做錯什麼了嗎 ？

Answer 1

這裏的問題在於CSS3手風琴在複選框輸入上使用動態:checked僞類。點擊「手風琴標題」切換複選框的選中狀態，然後切換手風琴內容的風格。要刪除雖然複選框，手風琴具有以下樣式：

.ac-container input { 
    display: none; 
} 

這也繼承了在表單中的輸入。您可以通過只覆蓋該樣式解決這個問題：

.ac-container form input { 
    display:inline; 
}