如何修改select的样式
1、第一步演示如何使用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>
3、接下来演示其他样式：<style type="text/css">.checkboxmode2{d足毂忍珩isplay: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>
5、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;}演示一个可以拖动的复选框
6、上例子说明，先构建一个类，指定背景颜色background-color，复选框的形状等，或者样式，前提是将默认复选框隐藏。这样设置格式。才能比较好的使用。