css3 checkbox样式美化switch

 不支持IE


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
    <title>测试</title> 
    <style type="text/css">
        .bs_switch { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; position: relative; width: 100px; height: 32px; border: 1px solid #DFDFDF; outline: 0; border-radius: 16px; box-sizing: border-box; background: #DFDFDF; }

        .bs_switch:before { content: attr(data-off); position: absolute; top: 0; left: 0; padding-left: 45px; width: 53px; height: 30px; line-height: 30px; border-radius: 15px; background-color: #FDFDFD; color: #fff; text-shadow: 0 1px 1px #000, 0 1px 1px #000; }

        .bs_switch:after { content: " "; position: absolute; top: 0; left: 0; width: 50px; height: 30px; border-radius: 15px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform .3s; }

        .bs_switch:checked { border-color: #04BE02; background-color: #04BE02; }

        .bs_switch:checked:after { transform: translateX(48px); }

        .bs_switch:checked:before { content: attr(data-on); padding-left: 0px; height: 30px; line-height: 30px; background-color: #04BE02; color: #fff; text-shadow: 0 1px 1px #000, 0 1px 1px #fff; }
    </style>
</head>
<body>
    <div class="form">
        <input class="bs_switch" id="bs_switch" name="bs_switch" type="checkbox" data-on="通过" data-off="不通过" value="1"> 
    </div>
  
</body>

</html>

 

posted @ 2016-12-20 12:56  静听，风雨_轮回╮  阅读(281)  评论(0)    收藏  举报