Question

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

我想要的是纯粹的CSS切换，您可以在“销售”和“租赁”之间切换。它们需要radio buttons但我不希望它们看起来像那样，所以我试图通过隐藏inputs并使{{1}跟随this example来设置它们的样式看起来很简单labels。

标记是这样的：

links

我知道Foundation中自定义表单的默认标记是将<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>  </form>嵌套在标签内部，但我无法这样做，因为我无法定位已检查的input父级用CSS，但我可以针对它的兄弟。

我添加了input类，因为输入不可见，我不需要它们漂亮。

因为某些奇怪的原因，no-custom工作正常，点击标签会检查label for="sale"，但点击input id="sale"也会检查label for="rent"。有什么想法吗？

Answer 1

好的，我发现基金会通过javascript改变了labels的正常行为。如果我停用了我的javascript，radio buttons和他们的labels工作正常。

所以我按照推荐的标记，在inputs内嵌套labels，并添加span标记为input的兄弟，并为span设置样式而不是标签。我保留'no-custom'类，因为我不需要为这些输入定制样式。

所以最后它看起来像这样：

<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
}

这么简单，让我疯了一会儿！

使用单选按钮进行css切换（使用Foundation 4）

1 个答案: