0

我在自定义 Foundation 4 表单中遇到了这个完全愚蠢的问题。

我想要做的是一个纯 CSS 切换，你可以在“销售”和“出租”之间切换。它们必须是，radio buttons但我不希望它们看起来像那样，所以我尝试按照这个示例通过隐藏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>

我知道 Foundation 中自定义表单的默认标记是input嵌套在标签内，但我不能这样做，因为我无法input使用 CSS 定位已检查的父级，但我可以定位它的兄弟姐妹。

我添加了这个no-custom类，因为输入是不可见的，我不需要它们漂亮。

因此，出于某种奇怪的原因，label for="sale"工作正常，单击标签会检查input id="sale"，但单击label for="rent"也会检查input id="sale". 任何想法为什么？

4

1 回答 1

0

好的，我发现 Foundation 改变了labels通过 javascript 的正常行为。如果我禁用我的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
}

如此简单，它让我生气了一段时间！

于 2013-10-17T13:47:05.897 回答