纯CSS3模拟IOS单选按钮样式代码

一款纯CSS3模拟IOS单选按钮样式代码，页面提供了7种可供参考，点击单选按钮便能看到不同的效果（状态为DISABLED是不能点击的），并简单给出了样式代码。

分类：表单代码 > 复选框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面元素的样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，多个checkbox放入不同的div容器里，代码如下：

<div class="wrapper">
    <h1>纯CSS3模拟IOS单选按钮样式</h1>
    <section id="fields" class="fields section">
        <div class="fields__item">
            <input type="checkbox" class="uiswitch">
            <h6>Off (unchecked)</h6>
        </div>
        <div class="fields__item">
            <input type="checkbox" class="uiswitch" checked>
            <h6>On (checked)</h6>
        </div>

        <div class="fields__item">
            <input type="checkbox" class="uiswitch" disabled>
            <h6>Disabled Off</h6>
        </div>

        <div class="fields__item">
            <input type="checkbox" class="uiswitch" checked disabled>
            <h6>Disabled On</h6>
        </div>

        <div class="fields__item">
            <input type="checkbox" class="uiswitch custom">
            <h6>Custom</h6>
        </div>

        <div class="fields__item">
            <input type="checkbox" class="uiswitch my-switch">
            <h6>Custom</h6>
        </div>
    </section>

    <section id="usage" class="section">
        <p>It's a one liner!</p>
        <pre><code><input type="checkbox" class="uiswitch"></code></pre>
        <p>Or just use SCSS and customize it too!</p>
        <pre><code>import 'uiswitch';

$uiswitch-thumb-tint: #ffffff;
$uiswitch-on-tint: red;</code></pre>
    </section>
</div>