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 のカスタム フォームのデフォルト マークアップは、ラベルの内側にネストされていることを知っていますが、CSS でinputチェックされた親をターゲットにすることはできませんがinput、その兄弟をターゲットにすることはできないため、そのようにすることはできません。

クラスを追加したのはno-custom、入力が表示されないため、きれいにする必要がないからです。

何らかの奇妙な理由で、label for="sale"ラベルをクリックするinput id="sale"と がチェックされますが、 をクリックするとlabel for="rent"もチェックされますinput id="sale"。理由はありますか？

4

1 に答える 1

0

わかりました、Foundation がlabelsJavaScript 経由の通常の動作を変更することがわかりました。JavaScript を無効にするradio buttonsと、問題なくlabels動作します。

inputsそこで、推奨されるマークアップに従い、内部にネストし、兄弟であるタグをlabels追加し、ラベルの代わりにスタイルを設定しました。これらの入力にカスタム スタイルは必要ないため、「カスタムなし」クラスを保持します。spaninputspan

したがって、最終的には次のようになります。

<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 に答える