如何改变checkbox的样式
复选框，也叫做CheckBox，是一种基础控件。.NET的工具箱里包含这个控件，它可以通过其属性和方法完成复选的操作。为了完成更多复杂的需求，也出了第三方控件的复选框。只需要将其dll添加到工具箱里，就可以使用更多功能的复选框控件。
操作方法
- 01
第一步演示如何使用checkbox 在<form></form>标签内使用<input type="checkbox" name=" " value=" " id=" ">编辑一组checkbox，通过name获取checkbox数组。根据状态，获得数值。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>checkbox demo</title> <script> function createmenu(){ var menu=document.forms[0].menu; var choice=""; for(i=0;i<menu.length;i++){ if(menu[i].checked){ choice=choice+menu[i].value+","; } } document.getElementById("list").value="You have choose:"+choice; } </script> </head> <body> <h1>checkbox demo</h1> <form> <input type="checkbox" name="menu" value="coffee" id="check1">coffee<br> <input type="checkbox" name="menu" value="milk" id="check2">milk<br> <input type="checkbox" name="menu" value="cola" id="check3">cola<br> <input type="checkbox" name="menu" value="juice" id="check4">juice<br> <input type="button" onclick="createmenu()" value="click here to create the menu"><br> <input type="text" style="width:1000px;height:20px" id="list"> </form> </body> </html>
- 02
对一个checkbox的模式可以通过改变和设置。 <style type="text/css"> .checkboxmode1{display:none;} /*******STYLE 1*******/ .checkboxmode1 + label { background-color: lightblue; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 10px; border-radius: 10px; display: inline-block; position: relative; margin-right: 30px;} .checkboxmode1 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} .checkboxmode1:checked + label { background-color: lightgreen; border: 1px solid #92A1AC; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: black;} .checkboxmode1:checked + label:after{ content: '\2714'; position: absolute; top: 0px; left: 0px; color: red; width: 100%; text-align: center; font-size: 1.5em; padding: 1px 0 0 0; vertical-align: text-top; } </style> 通过设置checkbox在点击和未点击是的状态设置其模式。必须先将checkbox隐藏。display：none;
- 03
接下来演示其他样式： <style type="text/css"> .checkboxmode2{display:none;} /*******STYLE 2*******/ .checkboxmode2 + label { background-color: orange; padding: 18px 20px 18px 23px; box-shadow: inset 0 50px 37px -30px rgba(255, 222, 197, 0.3), 0 0 13px rgba(0, 0, 0, 0.6); border-radius: 1000px; display: inline-block; position: relative; border-top: 1px solid #ECA14F; margin-right: 30px; color: black; font-size: 0.7em; width: 113px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); border-bottom: 1px solid #552B09; } .checkboxmode2 + label:hover { border-top: 1px solid #FC8C1E; background: #FC8C1E; box-shadow: inset 0 -50px 37px -30px rgba(255, 222, 197, 0.07), 0 0 13px rgba(0, 0, 0, 0.6); } .checkboxmode2 + label:active { border-top: none; background: #FC8C1E; padding: 19px 20px 18px 23px; box-shadow: inset 0 3px 8px rgba(129, 69, 13, 0.3), inset 0 -50px 37px -30px rgba(255, 222, 197, 0.07), 0 0 13px rgba(0, 0, 0, 0.6); } .checkboxmode2 + label:after { content: ' '; border-radius: 100px; width: 32px; position: absolute; top: 12px; right: 12px; box-shadow: inset 0px 16px 40px rgba(0, 0, 0, 0.4); height: 32px; } .checkboxmode2 + label:before { content: ' '; border-radius: 100px; width: 20px; position: absolute; top: 18px; right: 18px; z-index: 999; box-shadow: inset 0px 16px 40px #FFF; height: 20px; display: none; } .checkboxmode2:checked + label:before { display: block; } </style> <script> function check(){ if(document.getElementById("checkbox1").checked){ document.getElementById("state").value="checked"; }else{ document.getElementById("state").value="unchecked"; } } </script>
- 04
<style type="text/css"> .checkboxmode3{display:none;} /*******STYLE 3*******/ .checkboxmode3 + label { background-color: #fafbfa; padding: 9px; border-radius: 50px; display: inline-block; position: relative; margin-right: 30px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; width: 40px; height: 15px; } .checkboxmode3 + label:after { content: ' '; position: absolute; top: 0; -webkit-transition: box-shadow 0.1s ease-in; transition: box-shadow 0.1s ease-in; left: 0; width: 100%; height: 100%; border-radius: 100px; box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4); } .checkboxmode3 + label:before { content: ' '; position: absolute; background: white; top: 1px; left: 1px; z-index: 999999; width: 31px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; height: 31px; border-radius: 100px; box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3); } .checkboxmode3:active + label:after { box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee; } .checkboxmode3:active + label:before { width: 37px; } .checkboxmode3:checked:active + label:before { width: 37px; left: 20px; } .checkboxmode3 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .checkboxmode3:checked + label:before { content: ' '; position: absolute; left: 26px; border-radius: 100px; } .checkboxmode3:checked + label:after { content: ' '; font-size: 1.5em; position: absolute; background: #4cda60; box-shadow: 0 0 1px #4cda60; } 这个复选框一般用于移动客户端的开发，属于App应用。
- 05
.checkboxmode4{display:none;} /*******STYLE 4*******/ .checkboxmode4 + label { background-color: #FFF; padding: 11px 9px; border-radius: 7px; display: inline-block; position: relative; margin-right: 30px; background: #F7836D; width: 58px; height: 10px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4); } .checkboxmode4 + label:before { content: ' '; position: absolute; background: #FFF; top: 0px; z-index: 99999; left: 0px; width: 24px; color: lightgreen; height: 32px; border-radius: 7px; box-shadow: 0 0 1px rgba(0,0,0,0.6); } .checkboxmode4 + label:after { content: 'off'; position: absolute; top: 7px; left: 37px; font-size: 0.5em; color: white; font-weight: bold; left: 8px; padding: 5px; top: 4px; border-radius: 100px; } .checkboxmode4:checked + label { background: #67A5DF; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4); } .checkboxmode4:checked + label:after { content: 'on'; left: 10px; } .checkboxmode4:checked + label:before { content: ' '; position: absolute; z-index: 99999; left: 52px; } .checkboxmode4 + label:after { left: 35px; } 演示一个可以拖动的复选框
- 06
以上例子说明，先构建一个类，指定背景颜色background-color，复选框的形状等，或者样式，前提是将默认复选框隐藏。这样设置格式。才能比较好的使用。