本文涉及到的图片 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; } 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; } function getid(id) { return document.getElementById(id); } function gettag(tag, obj) { if (obj) { return obj.getElementsByTagName(tag) } else { return document.getElementsByTagName(tag) } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }; } function radio_style() {//3设置样式 if (gettag("input")) { var r = gettag("input"); function select_element(obj, type) {//1设置背景图片 obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px 0px"; if (obj.type == "checkbox") { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px -15px"; } if (type) { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px 0px"; if (obj.type == "checkbox") { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px -15px"; } } } //1 for (var i = 0; i < r.length; i++) { if (r[i].type == "radio" || r[i].type == "checkbox") { r[i].style.opacity = 0; r[i].style.filter = "alpha(opacity=0)";//隐藏真实的checkbox和radio r[i].onclick = function() { select_element(this); unfocus(); } if (r[i].checked == true) { select_element(r[i]); } else { select_element(r[i], 1); } } } function unfocus() {//2处理未选中 for (var i = 0; i < r.length; i++) { if (r[i].type == "radio" || r[i].type == "checkbox") { if (r[i].checked == false) { select_element(r[i], 1) } } } } //2 } } //3 function addevent() { gettag("input", getid("button"))[0].onclick = function() { this.value = "去除样式"; this.onclick = removeevent; radio_style(); }; } function removeevent() { var r = gettag("input"); for (var i = 0; i < r.length; i++) { if (r[i].type == "radio" || r[i].type == "checkbox") { r[i].style.opacity = 100; r[i].style.filter = "alpha(opacity=100)"; r[i].onclick = function() { } r[i].parentNode.style.background = "none"; } } gettag("input", getid("button"))[0].value = "加载样式"; gettag("input", getid("button"))[0].onclick = function() { this.value = "去除样式"; this.onclick = removeevent; radio_style(); }; } addLoadEvent(addevent); 利用javascript自定义radio及checkbox样式 单选框样式: 男 女 boy girl 复选框样式: xhtml CSS Javascript Flash Ajax AS Flex PHP/.NET/JSP 了解 一般 熟练 精通 资深专家 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]