單選按鈕在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手風琴裏不起作用

回答

相關問題