您现在的位置是:首页 > 学习心得

css实现switch开关按钮

刘锁2018-09-28人围观
简介昨天想给留言板增加一个回复自动发邮件功能,直接用checkbox感觉太丑,所以就想到做微信小程序时用的switch开关按钮,源码和效果如下,有需要的同学可以参考看看。
直接上源码吧,有需要的自己看看了
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>css实现switch开关按钮</title>
    <style type="text/css">
        .switch {display: none;}/*隐藏checkbox按钮*/
        .switch-button {position: relative;display: inline-block;vertical-align: middle;box-shadow: #ccc 0px 0px 0px 1px;width: 30px;height: 15px;border-radius: 15px;background-color: #ddd;overflow: hidden;}
        .switch-button:before {content: '';position: absolute;display: inline-block;left: 0;width: 15px;height: 15px;border-radius: 15px;background-color: #fff;z-index: 20;-webkit-transition: all 0.5s;transition: all 0.5s;}
        .switch:checked + label.switch-button:before {left: 15px;}
        .switch:checked + label.switch-button {background-color: #67a5df;}
        .email_span{vertical-align: middle;font-size: 13px;padding-left: 5px;color: #999;}
    </style>
</head>
<body>
    <!--checked="checked"表示默认选中状态,去掉表示默认不选中-->
     <!--isset($_POST["email_checked"])?$_POST["email_checked"]:'off';通过form表单提交后,php页面可以这样获取按钮开启还是关闭状态-->
    <input type="checkbox" name="email_checked" id="email_checked" checked="checked" class="switch" />
    <label for="email_checked" class="switch-button"></label><span class="email_span">有回复时邮件通知我</span>
</body>
</html>
效果如图所示:
css实现switch开关按钮
文件下载页面链接: https://pan.baidu.com/s/1f-e59SZMSGFtxyP1pObikg 提取码: 9uty

打赏本站,你说多少就多少

文章评论

    共有条评论

    用户名:

    验证码:

本栏推荐

点击排行

关注微信

    微信关注