CSS Toggle Switch with select

2

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

Well, the script that works is like this      link

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

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

Only with option to turn on and off (0,1)

I would like to be able to adapt the CSS for this, but I see it's CSS3 and I do not know how to work with it. What can I do?

Example of link

    
asked by anonymous 09.12.2014 / 23:43

1 answer

2

This code is made for input type="checkbox" and CSS does the whole job. That is, if the input is :checked or not, the button moves. In your case could work like that too , with inputs.

But if you really want to use select you can do this by using a ligado class to override the :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 (relevant part only)

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

jsFiddle: link

    
10.12.2014 / 00:08