单选按钮在css手风琴里不起作用

我在css手风琴里面有一个单选按钮，出于某种原因，它不起作用。也许我用于手风琴的CSS重写了单选按钮？也许是因为手风琴是由造成问题的复选框制成的？我也把道场控制手风琴和一些工作，有的没有下面里面的代码：手风琴之外的第一个单选按钮正常工作单选按钮在css手风琴里不起作用

HTML：

<input type="radio" name="colors" value="green" />Green <!--this works fine--> 
<input type="radio" name="colors" value="red" />Red 
<section id="accordionMTF"> 
    <div> 
     <div style="width: 450px; 
           height: 80px"></div> 
     <input type="checkbox" id="checkMTF-1" checked="checked" /> 
     <label for="checkMTF-1">Input System Info</label> 
     <article> 
      <input type="radio" name="colors" value="green" />Green <!--this doesnt work--> 
      <input type="radio" name="colors" value="red" />Red</article> 
    </div> 
    <div> 
     <input type="checkbox" id="checkMTF-2" /> 
     <label for="checkMTF-3">Input Marking Information</label> 
     <article> 
      <p style="width: 450px; 
           height: 400px">Fill out form</p> 
     </article> 
    </div> 
    <div> 
     <input type="checkbox" id="checkMTF-3" /> 
     <label for="checkMTF-4">Complete and Submit</label> 
     <article> 
      <p style="width: 450px; 
           height: 400px">Fill out form</p> 
     </article> 
    </div> 
</section>

CSS： /马克票形式手风琴/

#accordionMTF input { 
     display: none; 
    } 
    #accordionMTF label { 
     background: #eee; 
     border-radius: .25em; 
     cursor: pointer; 
     display: block; 
     margin-bottom: .125em; 
     padding: .25em 1em; 
     z-index: 20; 
    } 
    #accordionMTF label:hover { 
     background: #ccc; 
    } 
    #accordionMTF input:checked + label { 
     background: #ccc; 
     border-bottom-right-radius: 0; 
     border-bottom-left-radius: 0; 
     color: white; 
     margin-bottom: 0; 
    } 
    #accordionMTF article { 
     background: #f7f7f7; 
     height:0px; 
     overflow:hidden; 
     z-index:10; 
    } 
    #accordionMTF article p { 
     padding: 1em; 
    } 
    #accordionMTF input:checked article { 
    } 
    #accordionMTF input:checked ~ article { 
     border-bottom-left-radius: .25em; 
     border-bottom-right-radius: .25em; 
     height: auto; 
     margin-bottom: .125em; 
    }

我有一个小提琴： here

感谢

来源

2014-11-24 pvitt

您radiobox通过CSS隐藏：'#accordionMTF输入{显示：无}'。你还应该使用不同的名称（'颜色'已被使用） – fcalderan 2014-11-24 16:03:42

当你说“它不工作”你的意思是说“它不显示”？因为你的CSS显然隐藏了它#accordionMTF input {display：none;}' – 2014-11-24 16:03:59

你手风琴决定隐藏所有输入的开发商

#accordionMTF input { 
    display: none; 
}

一种更理智的方法是给输入手风琴功能所需的一类（.hidden），并将其用作选择器而不是全部隐藏所有输入：

<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" /> 

.hidden { 
    display: none; 
}

WORKING EXAMPLE

来源

2014-11-24 16:07:55 Turnip

谢谢你解决了这个问题 – pvitt 2014-11-24 16:17:46

这里的原因是：（！？）

accordionMTF input { 
     display: none; 
    }

来源

2014-11-24 16:03:32

只要你继续使用相同的HTML结构，所有你需要做的是返工你的CSS一点点。后续CSS

#accordionMTF input { 
    display: none; 
}

需要看起来像这样

#accordionMTF > div > input[type='checkbox'] { 
    display : none; 
}

这是没有JavaScript来创建一个手风琴极好的尝试。你也可以考虑合并CSS3动画。

还有一个错误，你的标签有错误的for属性值。

这里是工作提琴http://jsfiddle.net/czo2m22s/21/

来源

2014-11-24 16:14:22

单选按钮在css手风琴里不起作用

回答

相关问题