在手风琴内添加表格

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