纯HTML+CSS实战之仿ios开关按钮

效果图如上：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css仿ios开关按钮</title>
    <style>
        .switch{
            width: 400px;
            height: 100px;
        }
        .switch li{
            clear: both;
            line-height: 49px;
            border-bottom: 1px solid #cccccc;
           list-style: none;
        }
        .switch li input{
            display: none;
        }
        .switch li label{
            width: 50px;
            height: 28px;
            margin-top: 11px;
            background-color: #cccccc;
            box-sizing: border-box;
            border-radius: 15px;
            float: right;
            box-shadow: 0 1px 2px rgba(247, 246, 123, 0.1) inset;
        }
        .switch li label em{
            width: 25px;
            height: 26px;
            margin: 1px;
            background-color: white;
            border-radius: 14px;
            float: left;
        }
        .switch input:checked+label{
            background-color: #5af569;
        }
        .switch input:checked+label em{
            float: right;
        }
    </style>
</head>
<body>
<ul class="switch">
    <li>
        <input type="checkbox" name="aaa" id="a1">
        流量不足提醒
        <label for="a1"><em></em></label>
    </li>
    <li>
        <input type="checkbox" name="aaa" id="a2">
        余额不足提醒
        <label for="a2"><em></em></label>
    </li>
</ul>
</body>
</html>
纯HTML+CSS实战之仿ios开关按钮

猜你喜欢
