Add a form inside an accordion

Question

I am currently using the accordion I found here.

Here is the 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;
        }

And here is the HTML code:

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

Unfortunatly, I can't see the radio button inside the accordion (when I drop down the "Available options") but I can see the items. Did i do something wrong ?

Answer 1

The problem here is that the CSS3 accordion uses the dynamic :checked pseudo-class on a checkbox input. Clicking on an "accordion header" toggles that checkbox's checked state, and that then toggles the styles on the accordion's content. To remove the checkboxes though, the accordion has the following style:

.ac-container input {
    display: none;
}

This also inherits to the inputs in your form. You can solve this by just overriding that style:

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