标签：ansi charset console 属性 ack htm round 绑定 checkbox
本文为博主原创，转载请注明出处。
Switch开关：
根据需求可知，Switch开关只有两种选择，true或false。所以我们想到HTML的checkbox控件，用它来做。
<input id="switch" type="checkbox" class="switch" />
但是在浏览器中，checkbox是有固定形状的（对勾），所以我们并不能直接修改checkbox的样式。
那我们该修改一个什么东西的样式变成开关呢？所以我们联想到 label 标签，为什么呢？因为label标签的for属性可以绑定表单控件，点击label标签，就相当于你点击了绑定的那个控件。
<label for="switch">test</label>
废话不多说，直接上完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/test.css" /> </head> <body> <div class="container"> <input id="switch" type="checkbox" class="switch" /> <label for="switch" onclick="test()"></label> </div> <script> var test = function(){ console.log(!document.getElementById(‘switch‘).checked ? "选中" : "未选中"); } </script> </body> </html>
/*开关的大小*/ .container { height: 15px; width: 30px; } /*设置checkbox不显示*/ .switch { display: none; } /*设置label标签为椭圆状*/ label { display: block; background-color: #EEEEEE; height: 100%; width: 100%; cursor: pointer; border-radius: 25px; } /*在label标签内容之前添加如下样式，形成一个未选中状态*/ label:before { content: ‘‘; display: block; border-radius: 25px; height: 100%; width: 15px; background-color: white; opacity: 1; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08); -webkit-transition: all 0.2s ease; } /*在label标签内容之后添加如下样式，形成一个选中状态*/ label:after { position: relative; top: -15px; left: 15px; content: ‘‘; display: block; border-radius: 25px; height: 100%; width: 15px; background-color: white; opacity: 0; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08); -webkit-transition: all 0.2s ease; } /* ~ 兄弟选择符。 p~ul ：位于 p 元素之后的所有 ul 元素 */ /*选中后，选中样式显示*/ #switch:checked~label:after { opacity: 1; } /*选中后，未选中样式消失*/ #switch:checked~label:before { opacity: 0; } /*选中后label的背景色改变*/ #switch:checked~label { background-color: green; }
标签：ansi charset console 属性 ack htm round 绑定 checkbox
原文地址：http://www.cnblogs.com/lishuxue/p/6478934.html
