html - CSS トグル ラジオ スイッチのカスタマイズ

Question

この CSS Radio Toggle は、私たちのサイトのセクションに適していると思います。オンが緑でオフが赤になるように個別化するにはどうすればよいでしょうか?

Jsフィドル

css の一部を変更しようとしましたが、2 つの別個のクラスを作成するために必要なビットが得られないようです。

#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
border-radius:3px;
}

考えや例を歓迎します:)

Answer 1

ここにフィドルがあります：http://jsfiddle.net/RkvAP/1304/

<div id="bounds">
    <label class="on"><input type="radio" name="toggle"><span>On</span></label>
    <label class="off"><input type="radio" name="toggle"><span>Off</span></label>
</div>

#bounds label.on input:checked + span {
    background: green;
    colr: #f7f7f7;
}

#bounds label.off input:checked + span {
    background: red;
    color: #f7f7f7;
}

Answer 2

とか、こんな感じかも..

<style>

#bounds input:checked + span.on {
    background-color: #0C0;
    color:#F7F7F7;
}
#bounds input:checked + span.off {
    background-color: #F00;
    color:#F7F7F7;
}

</style>

<div id="bounds">
    <label><input type="radio" name="toggle"><span class="on">On</span></label>
    <label><input type="radio" name="toggle"><span class="off">Off</span></label>
    </div>

Answer 3

background-color関連するラジオinputがチェックされている場合にのみ変更する場合は、次のことをお勧めします。

#bounds input:checked + span {
    color:#F7F7F7;
}
#bounds label:first-child input:checked + span {
    background-color:#060;
}
#bounds label:first-child + label input:checked + span {
    background-color:#600;
}

JSフィドル。

このアプローチは、マークアップ内の要素の順序に依存しますが、他の属性を追加する必要はありません。