使用单选按钮制作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 
} 

那么简单，它让我发疯了一段时间！