Monday, 24 November 2008

Using CSS classes on types of input

In IE 7 you can specify the type input[type="submit"]{} so your css for submits don't affect e.g. textboxes. Unfortunately this doesn't work in IE 6. This function appends a class to all the input elements to get around this problem. It's based on the fact that CSS is cumulative - class="class1 class2" combines the two classes. So what we are doing is taking the current class of the input and combining it with a new one which is specific to the type of input


window.onload = function changeClasses() {
currentdoc = document
var inputElements = currentdoc.getElementsByTagName('input');
for (var i = 0; i < inputElements.length; i++) {
if (inputElements[i].type == "submit") {
inputElements[i].className = inputElements[i].className + " submitbutton";
} else if (inputElements[i].type == "file") {
inputElements[i].className = inputElements[i].className + " file";
} else if (inputElements[i].type == "checkbox") {
inputElements[i].className = inputElements[i].className + " checkbox";
} else if (inputElements[i].type == "radio") {
inputElements[i].className = inputElements[i].className + " radio";
} else if (inputElements[i].type == "text") {
inputElements[i].className = inputElements[i].className + " textbox";
}
}
}

No comments: