Question

我目前正在使用手风琴，我发现here。

这是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伪类。单击“accordion header”切换该复选框的选中状态，然后切换手风琴内容的样式。要删除复选框，手风琴具有以下样式：

.ac-container input {
    display: none;
}

这也继承了表单中的输入。您可以通过覆盖该样式来解决此问题：

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

在手风琴内添加表格

1 个答案: