css如何实现类似手机的switch开关样式呢?


摘要:
下文讲述css实现手机switch开关样式的示例分享,如下所示:

switch开关样式最早出现在iphone手机上,现在流行于各大互联网应用中,那么如何使用css代码制作出switch开关的样式呢?如下所示:
例:

<html>
<head>
<meta charset="utf-8">
 
<style>
.Switch {
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding: 0;
    width: 400px;
    }
.Switch li {
    clear: both;
    line-height: 44px;
    border-bottom: 1px solid #CCC;
    list-style: none;
    }
.Switch input {
    display: none
    }
.Switch label {
    width: 52px;
    background: #CCC;
    height: 28px;
    border-radius: 14px;
    float: right;
    margin: 8px 10px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
    }
.Switch label em {
    width: 26px;
    height: 26px;
    float: left;
    margin: 1px;
    border-radius: 13px;
    box-shadow: 2px 3px 8px rgba(0,0,0,.1);
    background: #FFF;
    }
.Switch input:checked + label {
    background: #a4d714;
    }
.Switch input:checked + label em {
    float: right;
    }
.Switch input:disabled + label {
    opacity: 0.5
    }
</style>

<title>猫猫教程(maomao365.com)
switch开关样式示例分享
</title>
</head>

<body>

<p>
maomao365.com<br />
 switch 开关样式分享
</p>
<hr />

<ul class="Switch">
    <li>
        <input type="checkbox" name="chk1" id="data" />
        移动数据
        <label for="data"><em></em></label>
    </li>
    <li>
        <input type="checkbox" name="chk2" id="liang" checked />
        显示亮度自动调节
        <label for="liang"><em></em></label>
    </li>
    <li>
        <input type="checkbox" name="chk3" id="ye" disabled />
        夜间模式开启(已禁用)
        <label for="ye"><em></em></label>
    </li>
</ul>

</body>
</html>
css实现一个switch开关的示例分享

css实现一个switch开关的示例分享