아코디언 안에 서식을 추가하십시오.

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

이것은 또한 양식의 입력을 상속합니다. 당신은 그냥 스타일을 재정 의하여이 문제를 해결 할 수 있습니다

당신은 아마 확인란이 표시되지 않는