CODEWITHSUNDEEP
htmlcssformsradio-buttonswitch-statement
mrmason
mrmason

Reputation: 119

CSS Toggle Radio Switch Customisation

I found this CSS Radio Toggle which I think would work well for a section of our site, how would I individualise it so that on is green and off is red?

JsFiddle

I've tried altering some of the css but cant seem to get is this the bit I need to make two seperate classes of?

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

Thoughts and examples welcome thank you :)

Upvotes: 0

Views: 1577

Answers (3)

Kingk
Kingk

Reputation: 1021

Or May be like this..

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253416

I'd suggest, if you want the background-color to change only when the relevant radio input is checked:

#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 Fiddle.

Though this approach is dependant on the order of your elements in the mark-up, though it doesn't require the addition of any other attributes.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Here's a fiddle: 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;
}

Upvotes: 2

Related Questions