CSS Toggle Switch with <select>

Question

I need to transition from this script to use with <select>.

See well the script working is like this http://callmenick.com/tutorial-demos/css-toggle-switch/

My selects (over 88) are ONLY in this style:

<select>
<option value="0">Off</option>
<option value="1" selected="selected">On</option>
</select>

Only with on and off option (0.1)

I wish I could adapt the CSS for this, but I see that it is CSS3 and I don’t know how to work with it.. What can I do?

Example of what it would be like http://jsfiddle.net/thebestclassdsfgf/jo2hkom2/1/

Answer 1

This code is made for a input type="checkbox" and CSS does all the work. That is if the input is :checked or not, the button moves. In your case could work that way too, input.

But if you really want to use select can do so using a class ligado to replace the functionality of :checked

HTML

<select id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" >
    <option value="0">Off</option>
    <option value="1" selected="selected">On</option>
</select>
<label for="cmn-toggle-1"></label>

jQuery

$('select').on('click', function () {
     $(this).val(this.value == '1' ? '0' : '1');
    this.classList.toggle('ligado');
});

CSS (only the relevant part)

.cmn-toggle-round.ligado + label:before {
    background-color: #8ce196;
}
.cmn-toggle-round.ligado + label:after {
    margin-left: 60px;
}

jsFiddle: http://jsfiddle.net/y8u1beek/