Tryit Editor v2.3

Edit This Code:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="../../code.jquery.com/jquery-1.11.2.min.js"></script> <script src="../../code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> /* Custom indentations are needed because the length of custom labels differs from the length of the standard labels */ .custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on { text-indent: -4em; } .custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off { text-indent: 2em; } /* Custom widths are needed because the length of custom labels differs from the length of the standard labels */ .custom-size-flipswitch.ui-flipswitch { width: 8.875em; } .custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active { padding-left: 7em; width: 1.875em; } </style> </head> <body> <div data-role="page"> <div data-role="main" class="ui-content"> <form method="post" action="http://www.w3schools.com/jquerymobile/demoform.asp"> <label for="switch">Flip Toggle Switch:</label> <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-wrapper-class="custom-size-flipswitch"> <br> <input type="submit" data-inline="true" value="Submit"> </form> </div> </div> </body> <!-- Mirrored from www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_select_switch_css by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 07:30:20 GMT --> </html>
Result:
Try it Yourself - © w3schools.com