Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>纯css编写开关按钮（一）</title>
    <style type="text/css">
        .chooseBtn {
            display: none;
        }
​
        .choose-label {
            box-shadow: #ccc 0px 0px 0px 1px;
            width: 40px;
            height: 20px;
            display: inline-block;
            border-radius: 20px;
            position: relative;
            background-color: #bdbdbd;
            overflow: hidden;
        }
​
        .choose-label:before {
            content: '';
            position: absolute;
            left: 0;
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 20px;
            background-color: #fff;
            z-index: 20;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }
​
        .chooseBtn:checked + label.choose-label:before {
            left: 20px;
        }
​
        .chooseBtn:checked + label.choose-label {
            background-color: #51ccee;
        }
    </style>
</head>
<body>
<input type="checkbox" name="sex" id="male" class="chooseBtn" />
<label for="male" class="choose-label"></label>
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dinghuihuapro
0viewers