Pure CSS Switch

by Luca De Nardi

HTML

<div ng-controller="MyCtrl">
    <span class="wrapper">
      <input type="checkbox" name="toggle" id="toggle">
      <label for="toggle"></label>
    </div>
</div>

CSS

.wrapper {
  max-width:46px;
  margin:0 auto 0 auto;
  text-align:center;
}

input#toggle {
max-height: 0;
max-width: 0;
opacity: 0;
}
input#toggle + label {
display: inline-block;
position: relative;
box-shadow: inset 0 0 0px 1px #d5d5d5;
text-indent: -5000px;
height: 14px;
width: 46px;
    background: #f44336;
}

input#toggle + label:before {
content: "";
position: absolute;
display: block;
height: 14px;
width: 23px;
top: 0;
left: 0;
/*border-radius: 15px;*/
background: rgba(76, 175, 80, 1);
-moz-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

input#toggle + label:after {
content: "";
position: absolute;
display: block;
height: 14px;
width: 23px;
top: 0;
left: 0px;
/*border-radius: 15px;*/
background: white;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
-moz-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
input#toggle:checked + label:before {
width: 46px;
background: rgba(76, 175, 80,1);
}

input#toggle:checked + label:after {
left: 50%;
box-shadow: inset 0 0 0 1px rgba(76, 175, 80,1), 0 2px 4px rgba(0,0,0,.2);
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}