dO-BoY

Form Field Backgrounds

At the Day Job I was called upon to make form fields with rounded corners. There’s a lot of approaches out there, but most of them are a bit too complex for my liking. Generally, it’s some variation on the old-tymey technique of putting something in the center of a 3×3 table, but with DIVs or what-have-you.

Forget that, I want something simple, just a bit of CSS I can tack onto text input objects. The simple approach seemed to work:

input{
   width: 90px;
   height: 26px;
   background: url(/images/text-field.png)
     no-repeat;
}

…at first. It turns out Internet Explorer anchors the background image to the text field, and if you type beyond the border, the image scrolls off to the left as you type.

Well, that’s okay, you can just anchor the background with “background-attachment: fixed;” like so:

input{
   width: 90px;
   height: 26px;
   background: url(/images/text-field.png)
     fixed no-repeat;
}

Ah, but there’s a slight problem now: Firefox and Safari respond to this new attribute by not showing the background image at all. I have to say, and this could be a first for me, my opinion is that IE gets this one right. Scrolling makes sense, and a “fixed” background is the right solution.

But such is the life of a web developer, making things work the way they are, not the way they ought to be. So, alas, I left the “fixed” attribute out of the CSS–works for Safari and Firefox–and used jQuery’s “document ready” function for IE:

$(document).ready(function(){
if ( $.browser.msie )
    $('input').css('background-attachment','fixed');
});

It’s a little weak, I know, but sometimes quick and dirty is the best solution. Besides, without JavaScript, the rest of the site will fail much worse than this form field.