switch实现苹果IOS风格单复选框样式按钮

新建html文档。

书写hmtl代码。

书写css代码。body * { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; -moz-box-sizing: border-box; }a { color: #888; text-decoration: none; }small { font-size: 13px; font-weight: normal; padding-left: 10px; }#first_div { width: 90%; max-width: 600px; min-width: 340px; margin: 50px auto 0; color: #444; }#second_div { width: 90%; max-width: 600px; min-width: 340px; margin: 50px auto 0; background: #f3f3f3; border: 6px solid #eaeaea; padding: 20px 40px 40px; text-align: center; border-radius: 2px; }#third_div { width: 90%; max-width: 600px; min-width: 340px; margin: 10px auto 0; }.lcs_wrap { display: inline-block; direction: ltr; height: 28px; vertical-align: middle; }.lcs_wrap input { display: none; }.lcs_switch { display: inline-block; position: relative; width: 73px; height: 28px; border-radius: 30px; background: #ddd; overflow: hidden; cursor: pointer; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }.lcs_cursor { display: inline-block; position: absolute; top: 3px; width: 22px; height: 22px; border-radius: 100%; background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.1); z-index: 10; -webkit-transition: all .2s linear; -ms-transition: all .2s linear; transition: all .2s linear; }.lcs_label { font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 12px; letter-spacing: 1px; line-height: 18px; color: #fff; font-weight: bold; position: absolute; width: 33px; top: 5px; overflow: hidden; text-align: center; opacity: 0; -webkit-transition: all .2s ease-in-out .1s; -ms-transition: all .2s ease-in-out .1s; transition: all .2s ease-in-out .1s; }.lcs_label.lcs_label_on { left: -70px; z-index: 6; }.lcs_label.lcs_label_off { right: -70px; z-index: 5; }.lcs_switch.lcs_on { background: #75b936; box-shadow: 0 0 2px #579022 inset; }.lcs_switch.lcs_on .lcs_cursor { left: 48px; }.lcs_switch.lcs_on .lcs_label_on { left: 10px; opacity: 1; }.lcs_switch.lcs_off { background: #b2b2b2; box-shadow: 0px 0px 2px #a4a4a4 inset; }.lcs_switch.lcs_off .lcs_cursor { left: 3px; }.lcs_switch.lcs_off .lcs_label_off { right: 10px; opacity: 1; }.lcs_switch.lcs_disabled { opacity: 0.65; filter: alpha(opacity=65); cursor: default; }

书写并添加js代码。

查看效果。