Question

css实现iPhone的切换按钮

http://jingyan.baidu.com/article/7c6fb4281e225680642c90c4.html

为什么我做的没有绿色背景

Answer 1

1. 新建一个页面，如下图。

   

2. 把checkbox藏起来，切换按钮主要用label实现。给label加上适当的css属性

   

3. 给label加上before和after伪类。before作为下面的横槽，after作为切换的圆按钮

   先给label加上定位的css

   #chk-toggle + label:before,

   #chk-toggle + label:after {

       display: block;

       position: absolute;

       top: 1px;

       left: 1px;

       bottom: 1px;

       content: "";

   }

   如果不写bottom，那before和after还需要分别写高度

   

4. 加上原型按钮

   #chk-toggle + label:after {

       width: 58px;

       background-color: #fff;

       border-radius: 100%;

       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

       transition: margin 0.4s;

   }

   

5. 加底

   #chk-toggle + label:before {

       right: 1px;

       background-color: #f1f1f1;

       border-radius: 60px;

       transition: background 0.4s;

   }

   注意，after和before中的transition都是为了之后的切换动作用的

   

6. 现在只差最后的checked了

   #chk-toggle:checked + label:before {

       background-color: #8ce196;

   }

   #chk-toggle:checked + label:after {

       margin-left: 60px;

   }

   

7. 在console中可以看到切换时，checkbox的状态

   

   
   

Answer 2

你把按钮划过去了吗，
我也试了下，有绿色的
<style type="text/css">

#chk-toggle{display: none;}
#chk-toggle + label{display: block; position: relative; cursor: pointer; padding: 2px; width:120px; height:60px;background-color: #ddd; border-radius: 60px;}
#chk-toggle + label:before,#chk-toggle + label:after{display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: "";}
#chk-toggle + label:after{width: 58px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s;}
#chk-toggle + label:before{right: 1px; background-color: #f1f1f1; border-radius: 60px; transition: background 0.4s;}
#chk-toggle:checked + label:before{background-color: #8ce196;}
#chk-toggle:checked + label:after{margin-left: 60px;}
</style>
<div class="switch">
<input id="chk-toggle" type="checkbox" />
<label for="chk-toggle"></label>
</div>