I recommend using IETester, it will throw all the errors you ever wanted (NOT!) at you. Combine it with Firebug Lite and sleep a little better.

Some solutions have been proposed, among them:

• hiding the select element on hover
• replacing it with an input element on hover
• or stop caring about IE6 altogether

These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to place an invisible, empty IFRAME in the layer that will be positioned above the SELECT element.

Here’s how to do this jQuery-style:

The jQuery-Plugin:

jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = ''
        $(this).prepend(iframe);
    });
}

The Plugin setup:

$(function() {
    $('.myHoverClass').activeXOverlap();
});

where .myHoverClass references all elements that should hover above the select.

The required CSS:

What this does is placing an Iframe behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.

524288?
2147483647?
-1?
No, that’s not my bank account balance…

Unlike any other attribute, maxlength is implicitly present on any input-element. I had to find this out the hard way trying to select only input-elements with an explicitly set maxlength via the jQuery-selector input[maxlength].

Well, that didn’t work. input[maxlength] returns all inputs, regardless of whether they have maxlength or not. The only conclusion this leaves us with is that browsers add a certain maxlength-value implicitly to any input-field.

What’s my browser doing with maxlength?

That’s exactly what I asked myself. A quick browser test left me quite surprised, but, hey – what did I expect – every browser behaving the same? Not in this world…

Every browser rendering engine implies a different value. The most reasonable browsers are Firefox (surprised?) and Opera – they are at least assuming a negative value. The other values seem (at least to me, maybe I’m just missing some nerdy inside joke) completely arbitrary are natural limits: 2147483647 is the highest possible 32-bit-number (2^32 /2 or 0111 1111 1111 1111 1111 1111 1111 1111), while 524288 is the same in 16 bit:

jQuery to the rescue

So back to the original problem – my solution for selecting only input-fields with maxlength-attributes based on these findings is as follows:

var inputs = $('input[maxlength!=-1][maxlength!=524288][maxlength!=2147483647]');

Ugly, I know. But it works.

Take the Browser Test
and post your result in the comment section!

Why?

Why would I want to select only this subset of input elements anyway? In my case, it was to display the number of total and remaining characters a user could enter.