使用單選按鈕製作css切換（使用Foundation 4）

Question

我在自定義Foundation 4表單中遇到了這個完全愚蠢的問題。

我想要的是一個純粹的CSS切換，您可以在「銷售」和「租金」之間切換。他們需要是radio buttons，但我不希望他們看起來像那樣，所以我試圖按照this example來隱藏inputs並使labels看起來像links那樣簡單。

標記是這樣的：

<form class="custom"> 
    <input type="radio" name="switchRadio" id="sale" value="sale" checked="" class="no-custom"> 
    <label for="sale">Sale</label> 
    <input type="radio" name="switchRadio" id="rent" value="rent" class="no-custom"> 
    <label for="rent">Rent</label> 
    <!--more form elements--> 
</form> 

我知道，在基金會自定義表單默認的標記是有嵌套在標籤內的input，但因爲我不能，我不能這樣做的t針對一個檢查input家長與CSS，但我可以針對其兄弟。

我已經添加了no-custom類，因爲作爲輸入不可見，我不需要它們是漂亮的。

因此，出於一些奇怪的原因，label for="sale"工作正常，點擊標籤檢查input id="sale"，但點擊label for="rent"也檢查input id="sale"。任何想法爲什麼？

Answer 1

好的我發現基金會通過javascript改變了labels的正常行爲。如果我禁用我的JavaScript，radio buttons和他們的labels工作得很好。

所以我跟着建議的標記，嵌套inputs內labels，並添加了span標籤是同級的input和風格的span，而不是標籤。我保留「非自定義」類，因爲我不需要這些輸入的自定義樣式。

那麼到底它看起來像這樣：

<form class="custom"> 
    <label for="sale"> 
     <input type="radio" name="switchRadio" id="sale" value="sale" checked="" class="no-custom"> 
     <span>Rent</span> 
    </label> 
    <label for="rent"> 
     <input type="radio" name="switchRadio" id="rent" value="rent" class="no-custom"> 
     <span>Sale</span> 
    </label> 
</form> 

而如果有人對CSS的興趣：

input[type=radio] { 
    display: none 
} 
input:checked + span { 
    //your styles for the span next to the checked radio 
} 

那麼簡單，它讓我發瘋了一段時間！