码迷,mamicode.com
首页 > 其他好文 > 详细

Switch按钮

时间:2018-05-16 18:34:50      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:switch   AC   htm   info   put   png   shadow   .com   inline   

使用CSS+HTML5修改原生checkbox为Switch Button

 

        .switch {
            width: 45px;
            height: 15px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #c6cacd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch:before {
            content: ‘‘;
            width: 16px;
            height: 15px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch:checked {
            border-color: #64bd63;
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
        }
        .switch:checked:before {
            left: 30px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #5fa7fb 0 0 0 16px inset;
            background-color: #5fa7fb;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }
        .switch:focus{
    		outline: none !important;
    		border: none !important;
		}        

  <input class="switch switch-anim" style="border:0" type="checkbox" ‘+ checked +‘ onchange="checkNum(this)"></div>

 

效果:

技术分享图片

Switch按钮

标签:switch   AC   htm   info   put   png   shadow   .com   inline   

原文地址:https://www.cnblogs.com/zyxiaohuihui/p/9047165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!