html苹果风格开关,angularjs 苹果风格开关按钮demo

H5就是要求样式美，尽量实现app的风格，所以下面是app风格的开关按钮风格demo;

*{padding:0;margin:0;font-family:”microsoft yahei”!important;}

body{background-color:#efefef;}

ul,li{list-style:none;}

a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:auto;}

/* switch 开关 */

.ro-switch{display:inline-block;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}

.ro-switch>input{display:none;}

.slider{padding: 2px 25px 2px 2px;background:#cccccc;transition:padding 0.2s ease-in-out,background 0.2s ease-in-out;border-radius:11px;}

.slider-thumb{width:18px;height:18px;background:#FFF;border-radius:50%;}

.ro-switch>input:checked+.slider{background:#2196F3;padding:2px 2px 2px 25px;}

angularjs 苹果风格开关demo

var app=angular.module(“myApp”,[]);

app.directive(“toggleBtn”,function(){

return {

restrict: ‘E’,

place: true,

scope:{

“btnModel”:’=’

},

template:'{{btnModel}}’,

link:function(scope,elm,attr){

}

};

});

原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/204/