var checkboxHeight = "25"; var radioHeight = "25"; var selectWidth = "77"; document.write('<style type="text/css">input.styled { display: none; } select.styled {font-size:11px; color:#000; background-color:#fff; margin:5px 0 0 -3px; position: relative; width: ' + selectWidth + "px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>"); var Custom = { init: function () { var c = document.getElementsByTagName("input"), d = Array(), e, f, g; for (a = 0; a < c.length; a++) { if ((c[a].type == "checkbox" || c[a].type == "radio") && c[a].className == "styled") { d[a] = document.createElement("span"); d[a].className = c[a].type; if (c[a].checked == true) { if (c[a].type == "checkbox") { position = "0 -" + checkboxHeight * 2 + "px"; d[a].style.backgroundPosition = position } else { position = "0 -" + radioHeight * 2 + "px"; d[a].style.backgroundPosition = position } } c[a].parentNode.insertBefore(d[a], c[a]); c[a].onchange = Custom.clear; if (!c[a].getAttribute("disabled")) { d[a].onmousedown = Custom.pushed; d[a].onmouseup = Custom.check } else { d[a].className = d[a].className += " disabled" } } } c = document.getElementsByTagName("select"); for (a = 0; a < c.length; a++) { if (c[a].className == "styled") { f = c[a].getElementsByTagName("option"); g = f[0].childNodes[0].nodeValue; e = document.createTextNode(g); for (b = 0; b < f.length; b++) { if (f[b].selected == true) { e = document.createTextNode(f[b].childNodes[0].nodeValue) } } d[a] = document.createElement("span"); d[a].className = "select"; d[a].id = "select" + c[a].name; d[a].appendChild(e); c[a].parentNode.insertBefore(d[a], c[a]); if (!c[a].getAttribute("disabled")) { c[a].onchange = Custom.choose } else { c[a].previousSibling.className = c[a].previousSibling.className += " disabled" } } } document.onmouseup = Custom.clear }, pushed: function () { element = this.nextSibling; if (element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight * 3 + "px" } else if (element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight * 3 + "px" } else if (element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px" } else { this.style.backgroundPosition = "0 -" + radioHeight + "px" } }, check: function () { element = this.nextSibling; if (element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false } else { if (element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px" } else { this.style.backgroundPosition = "0 -" + radioHeight * 2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for (a = 0; a < inputs.length; a++) { if (inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0" } } } element.checked = true } }, clear: function () { inputs = document.getElementsByTagName("input"); for (var a = 0; a < inputs.length; a++) { if (inputs[a].type == "checkbox" && inputs[a].checked == true && inputs[a].className == "styled") { inputs[a].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px" } else if (inputs[a].type == "checkbox" && inputs[a].className == "styled") { inputs[a].previousSibling.style.backgroundPosition = "0 0" } else if (inputs[a].type == "radio" && inputs[a].checked == true && inputs[a].className == "styled") { inputs[a].previousSibling.style.backgroundPosition = "0 -" + radioHeight * 2 + "px" } else if (inputs[a].type == "radio" && inputs[a].className == "styled") { inputs[a].previousSibling.style.backgroundPosition = "0 0" } } }, choose: function () { option = this.getElementsByTagName("option"); for (d = 0; d < option.length; d++) { if (option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue } } } }; window.onload = Custom.init