Problem Definition:

Ok, at a client where we make a rather sophisticated web application for a big call center. One of the core requirements is to make it super-easy for CSRs to run through scripts on our site, while on the phone with a customer. And one way we achieve that is by having a consistent styling on web page elements with focus and precise tab navigation. Now, there are lots of Dropdown lists and Listboxes in use, which render as <select> HTML elements. Despite endless death wishes, our nemesis IE6 is still in use within the organization; so our site does need to support IE6.

So, here is our problem. IE < 8 does not render <select> lists like other elements in the browser; but rather as Windows OS elements. This leads to weird problems like inability to use custom styles or overlapping over other UI elements (use z-indexing to your advantage to fix up this issue). As for us, we wanted the select lists to have custom styling while idle & when in focus. This included a border which IE simply refuses to render; but it just had to work.

Solution:

There are a few nice JavaScript solutions people have implemented; “Bing” around. But these looked a little complicated. So, my approach was to simply to put a <div> around all the select lists; somewhat hacky, but works with ease. Essentially, the <select> lists may be rendered as needed — MVC helpers, plain HTML, server side etc.; but just wrapped in a <div> tag with a class attribute (I used ‘selectContainer‘). Next, in the site’s JS file or appropriate location, a sprinkle of jQuery magic:

$(document).ready(function ()
{
    $('.selectContainer').addClass("idleField");

    $('.selectContainer').focusin(function ()
    {
        $(this).addClass("focusField");
    });

    $('.selectContainer').focusout(function ()
    {
        $(this).removeClass("focusField").addClass("idleField");
    });
});

Let’s review. What we are doing is once the DOM is ready, we wire up some JavaScript event handlers to the <div> element. The tricky part is that with the addition of a surrounding <div>, we cannot be messing up tab navigation for the <select> elements; but somehow the surrounding <div> has to know when the containing <select> gains/loses focus. This is where jQuery shines with two handy little functions — focusin() & focusout(). As compared to simply focus() & blur(), these events bubble up to the parent controls; which is exactly what we need for our containing <div> tags. The “idleField” & the “focusField” in the code above are simple CSS styles, defined as needed. The final solution looked like this with effortless tabbing & custom styling on lists.

Listbox with custom styling

Dropdown with custom styling

I’m sure there are lots of other ways to solve the problem at hand, may be more elegant ones too. Please drop ideas/comments.

Adios!