css3-实现iOS的switch开关效果

知识点

• input标签是不支持伪元素的，不过Chrome上，input的type类型为checkbox或者radio时，可以使用伪元素，但是不建议。

• label标签和input标签的绑定方式，这可以提高用户的点击体验，例如你点击label标签，这样input也会同样被点击，也就是说如果在label元素内点击文本，就会触发此控件。

  • 显式绑定（定义label的for属性和input的id属性一致）

    <label for="switch">
    	<input type="checkbox" id="switch">
    </label>
    

  • 隐式绑定

    <label>
    	<input />
    </label>
    

• visibility属性：规定元素不可见，但是也会占据页面的空间

• css选择器：相邻兄弟选择器，使用符号 +

• 伪类选择器：:checked 表示元素处于选中状态的元素，radio，checkbox，select元素中的option标签

效果图

思路

使用label和input标签的隐式绑定，由于input标签不支持伪元素，所以使用span标签的伪元素制作白色小球和绿色背景，点击input时进行小球的水平平移和背景颜色的切换即可，使用visibility来隐藏input的checkbox的小方框。

Code