综合技术

Add a form inside an accordion

微信扫一扫,分享到朋友圈

Add a form inside an accordion
0

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 ?

Problem courtesy of: Exia0890

Solution

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

Solution courtesy of: Joeytje50

阅读原文...


微信扫一扫,分享到朋友圈

Add a form inside an accordion
0

CSS3 Recipes

Android View篇之调整字体大小滑杆的实现

上一篇

Joe Rogan称复制他声音的人工智能“非常准确”

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Add a form inside an accordion

长按储存图像,分享给朋友