"Material Design Switch"
Bootstrap 3.3.0 Snippet by sejdemyr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3 class="text-center">Material Design Switch</h3> <hr> <div class="col-xs-12"> <p class="lead">I have been using an Android Device for the last few days and am falling in love with the switchs they use in Android. I loved them so much I wanted to port them over to Bootstrap so I could use them in future projects. I did some research and all of the ones I could find used custom colors which prevented them from working with Bootswatch or required you to edit the css files to make them match your theme. I wanted to work around that.</p> <p class="lead">Please use the theme picker above to see how this snippet works with bootswatch themes. I hope you enjoy this snippet.</p> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-2 col-xs-offset-4"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Material Design Switch Demos</div> <!-- List group --> <ul class="list-group" id="requestlist"> </ul> </div> </div> </div> </div>
.material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; }
var requesttypes = ["water", "abandoned vehicle", "all"]; // Add request types requesttypes.forEach(function(d, i) { var id = d.replace(' ', ''); var h = d.charAt(0).toUpperCase() + d.slice(1); $("#requestlist").append('<li class="list-group-item">' + h + '<div class="material-switch pull-right"><input id="' + id +'" type="checkbox"/>' + '<label for="' + id + '" class="label-default"></label></div></li>' ) $('.material-switch > #' + id + '+ label').css('background', 'rgb(100, 149, 237)') })

Related: See More


Questions / Comments: