Scott Boms

Styling Form Inputs

One of the things we’re trying to accomplish with the big re-branding project I’m working on is facilitating global colour changes throughout the entire site via CSS (obviously). One of the items on the list causing problems is Opera’s handling of the input type=image element. Everything works as expected in older versions of the browser (as it does in every other browser out there, including IE5), but not the 7.x series which appears to contain a bug.

Implementation Details

The site currently (and going forward) uses a lot of image-based input objects (buttons) as opposed to the native OS-level widgets. These are also translated into around 40 locales — so there’s a lot to deal with. The newer buttons have been created as transparent GIFs using pixel font type. The idea is to apply a background colour and border to finish off the buttons with CSS.

Image Buttons
Transparent image buttons

In Safari, IE, OmniWeb, Firefox, Camino and Mozilla applying a background-color property to an assigned class or ID on these input elements works as expected but in Opera 7.x this property appears to have no effect. I’m assuming part of this is related to that property is not necessarily appropriate for input objects, but every other browser seems to support it when the input type is set to ‘image’ so why doesn’t Opera (anymore)?

I took a look through some of the Opera docs and I’m not entirely sure what to make of things. For an experiment I tried creating a regular input element and styled the background. Of course it bloody well worked in Opera but failed in Safari. Very frustrating.

Up For Suggestions

While I continue to ponder this, does anyone have any ideas or pointers to articles or tips that might help? We’re looking at the feasibility of converting the inputs to plain vanilla images with links, but I’m not sure it will be possible given the use of a lot of complex Javascript. That, and the short timeline we have until launch.

So say you…

I haven’t seen any articles, but would it be appropriate to wrap a meaningless div around the and apply the styles to that?

Derek Featherstone Derek Featherstone September 22, 2004

Strangely I hadn’t considered that. Probably because I’m trying to do away with as many unnecessary tags, spans and DIVs as possible. I don’t really want to do that at this point considering that Opera accounts for about 0.2 percent of the site’s traffic.

I decided to launch with the bug and will release a point update sometime in the following weeks which may or may not address the issue.

Scott Scott September 22, 2004