SiteCrafting, Inc.

Internet Explorer 6 is just too old to support all the fun CSS tricks of the modern web. The Input Type selector is one of the most problematic. I suggest a quick jQuery function to get around this.

Styling inputs is a pain. The input element has several different types, all of which are displayed in completely different ways. Briefly, they are:

• Text
• Password
• Checkbox
• Radio

As you can see, setting the width of all input elements will have unintended consequences for some input types. There are some common tricks to get around this. One is to add a special class to text and password boxes. Another is to use a CSS2 selector "input[type=password], input[type=text] { (css) }". The problem with this last method is Internet Explorer 6 doesn't support it. So what are we to do?

I created a script that will iterate though all input elements and append it's type to the class attribute. While this is a bit dirty, it does give us the ability to style these elements separately from each other without leaving IE6 in the dust.

$(function() {
    $('input').each(function() {
        $(this).addClass(this.type);
    });
});