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