checkbox美化及页面滚动

css的东西还是更新得快呀。(主要是js比较菜)，这里主要是把checkbox美化一下，radio什么的参考checkbox一样的道理，css能做的东西还是挺多的，虽然不是那么实用，但是选项卡，页面滚动，图片轮播什么的，都可以做，今天的主角就是css3的:checked外加上css3的~和+选择
:checked是被选中的 input 元素，当这东西后面跟上~和+后，你就可以让选中的input对应的标签做点事情了。~ 兄弟选择符，是指选择元素后面的所有兄弟元素，比如a~p就是指a标签后面所有的p标签。+ 相邻选择符，是指选择元素后面相邻的兄弟元素，这个只选择一个。

浏览器自带的复选框和单选框的样式简直对不起这网络信息的发展：

复选框：  单选框  1 2 3

是不是丑出天际了，我们的工作就是把丑的东西改装成美的东西给用户看的，自然少不了各种美化了，先来个checkbox的切换吧：

<label class="switch">
    <input type="checkbox">
    <div class="switchbox"></div>
</label>


 input[type="checkbox"]{
    display: none;
}
 label.switch{
        display: inline-block;
        width: 60px;
        height: 30px;
        cursor: pointer;
}
label.switch .switchbox{
    height: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 34px;
    background-color: #e5e5e5;
    transition: all 0.3s;
}
label.switch input[type="checkbox"]+.switchbox:after{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    transition: all 0.3s;
    background-color: #ffffff;
    transform: translateX(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
    label.switch input[type="checkbox"]+.switchbox:before{
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 56px;
    border-radius: 26px;
    box-sizing: border-box;
    height: 26px;
    background: #fff;
    z-index: 1;
    transition: all 0.3s;
    transform: scale(1);
}
label.switch input[type="checkbox"]:checked+.switchbox{
    background-color: #4cd964;
}
label.switch input[type="checkbox"]:checked+.switchbox:after{
    transform: translateX(30px);
}
label.switch input[type="checkbox"]:checked+.switchbox:before{
    transform: scale(0);
}

首先我们要把丑陋的checkbox给隐藏掉，用label把checkbox包裹住，这样点击label会触发checkbox的选择，然后主要是用:checked+，当checkbox选中后选择switchbox和switchbox的伪元素进行变化，加上一个过渡动画什么的就改装好了，当然其他什么的也是这个原理，css代码太多了，就不一一贴出来了，有兴趣的去看代码链接吧。

来看看所有改装的样式：

至于css滚动则是用几个radio，将其opacity设为0;让其透明，然后覆盖在文字上，你点击文字就选中了radio，body只显示当前窗口，超出隐藏，然后通过:checked ~让.main的transform: translateY变化，就达到了滚动的效果;

<input type="radio" name="nav" class="nav-1" checked="checked"/>
    <a  class="nav">首页</a>
    <input type="radio" name="nav" class="nav-2"/>
    <a  class="nav">新闻</a>
    <input type="radio" name="nav" class="nav-3"/>
    <a  class="nav">娱乐</a>
    <input type="radio" name="nav" class="nav-4"/>
    <a  class="nav">音乐</a>
    <input type="radio" name="nav" class="nav-5"/>
    <a  class="nav">其他</a>

<section class="main">
</section>


    .nav-1:checked ~ .main{
        transform: translateY(0%);
    }
    .nav-2:checked ~ .main{
        transform: translateY(-100%);
    }
    .nav-3:checked ~ .main{
        transform: translateY(-200%);
    }
    .nav-4:checked ~ .main{
        transform: translateY(-300%);
    }
    .nav-5:checked ~ .main{
        transform: translateY(-400%);
    }

本文示例：链接

本文代码地址：链接