利用JavaScript更改input中radio和checkbox样式

本文涉及到的图片
body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left; vertical-align: middle; _overflow: hidden; } .input_style label { padding: 0px 6px; cursor: pointer; } .input_style input { cursor: pointer; } .checkbox { padding: 0px; list-style: none; width: 600px; margin: 6px auto; height: auto; overflow: hidden; } .checkbox li { padding: 3px 0px; float: left; } h4 { width: 600px; margin: 0px auto; margin-top: 30px; } .button { width: 600px; text-align: center; margin: 0px auto; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <sty1e type="text/css"> body { margin: 0px; padding: 0px; font-size: 13px; } .input_style { padding: 6px 0px; width: 600px; margin: 0px auto; border-bottom: #666666 1px dotted; } .input_style span { display: inline-block; width: 15px; height: 15px; text-align: left; vertical-align: middle; _overflow: hidden; } .input_style label { padding: 0px 6px; cursor: pointer; } .input_style input { cursor: pointer; } .checkbox { padding: 0px; list-style: none; width: 600px; margin: 6px auto; height: auto; overflow: hidden; } .checkbox li { padding: 3px 0px; float: left; } h4 { width: 600px; margin: 0px auto; margin-top: 30px; } .button { width: 600px; text-align: center; margin: 0px auto; } </style>  <title>利用javascript自定义radio及checkbox样式</title> </head> <body>  单选框样式：   <input type="radio" name="sex" value="boy" checked="checked" id="sex_boy" /><label for="sex_boy">男</label>  <input type="radio" name="sex" value="girl" id="sex_girl" /><label for="sex_girl">女</label>    <input type="radio" name="marry" value="yes" id="marry_yes" /><label for="marry_yes">boy</label>  <input type="radio" name="marry" value="not" checked="checked" id="marry_not" /><label for="marry_not">girl</label>   复选框样式： <ul class="checkbox input_style"> <li> <input type="checkbox" name="hobby" checked="checked" id="hobby1" /><label for="hobby1">xhtml</label></li> <li> <input type="checkbox" name="hobby" id="hobby2" /><label for="hobby2">CSS</label></li> <li> <input type="checkbox" name="hobby" id="hobby3" /><label for="hobby3">Javascript</label></li> <li> <input type="checkbox" name="hobby" id="hobby4" /><label for="hobby4">Flash</label></li> <li> <input type="checkbox" name="hobby" id="hobby5" /><label for="hobby5">Ajax</label></li> <li> <input type="checkbox" name="hobby" id="hobby6" /><label for="hobby6">AS</label></li> <li> <input type="checkbox" name="hobby" id="hobby7" /><label for="hobby7">Flex</label></li> <li> <input type="checkbox" name="hobby" id="hobby8" /><label for="hobby8">PHP/.NET/JSP</label></li> </ul> <ul class="checkbox input_style"> <li> <input type="checkbox" name="hobby" checked="checked" id="hobby9" /><label for="hobby9">了解</label></li> <li> <input type="checkbox" name="hobby" id="hobby10" /><label for="hobby10">一般</label></li> <li> <input type="checkbox" name="hobby" id="hobby11" /><label for="hobby11">熟练</label></li> <li> <input type="checkbox" name="hobby" id="hobby12" /><label for="hobby12">精通</label></li> <li> <input type="checkbox" name="hobby" id="hobby13" /><label for="hobby13">资深专家</label></li> </ul>  <input type="button" value="加载样式" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

利用JavaScript更改input中radio和checkbox样式

JavaScript相关栏目本月热门文章