Styling Form Controls: Next Gen Browsers Let Us Decide.

by Jason.

Web forms present unique challenges for designers and developers alike. HTML provides a limited and increasingly outmoded set of standard controls, all rendered with subtle (and sometimes not-so-subtle) differences by various browsers and platforms. And even though, technically, CSS can be applied to these controls, each browser is unique in selectively ignoring some or all of the rules, instead often deferring to the operating system to provide platform-native widgets. As a result, attempting to create a consistent cross-browser UI has thus far been an exercise in futility. Over at 456 Berea Street, Roger Johansson has done some rather exhaustive testing and concluded it’s a lost cause. UX guru Eric Meyers agrees.

Even the notion of whether form controls should be style-able at all is the subject of much controversy, with two opposing camps staunchly divided. In one camp are those who view web forms as an extension of the browser, which is itself an extension of the operating system. This camp maintains that web forms should be governed by the same rules as the rest of the local system UI. Therefore, widgets should appear in OS-native form, their appearance never altered beyond the quietest adjustments to width or alignment. Their chief argument is that this consistency of form helps inexperienced users recognize and comprehend the function of input elements because they are used to seeing them in other applications on the system.

The opposing camp views the web itself as the platform, and the myriad different browsers mere portals to it. In this view, consistency is still important, but the local system is replaced by the web application itself. People now list web applications by name on their resum√©s. They skim Yahoo! News headlines on their Blackberries and Twitter from their phones. You can even buy a video camera with a YouTube setting. And these people aren’t just the technorati anymore. These are your friends, your family, your coworkers. Given the various ways a user might reach your application, it becomes a basic customer service imperative to present the most consistent UI possible across all user agents and platforms.

It’s a tall order, but the good news is, progress is being made in the latest generation of browsers. And interestingly enough, that progress comes in the form of a compromise that should make you happy regardless of which side of the fence you’re on. The latest versions of Firefox, Opera, and Safari all render form elements in essentially the same way. If no styling is applied, they are presented in OS-native form. However, applying CSS rules causes them to be displayed using a standard box model. The result isn’t perfect, but it brings us much, much closer to a truly consistent cross-browser UI than we’ve ever been before. Check out the screenshots below to see for yourself.

Firefox 3 - unstyled
Firefox 3, unstyled.

Firefox 3
Firefox 3, styled.

Opera 9.5 - unstyled
Opera 9.5, unstyled.

Opera 9.5
Opera 9.5, styled.

Safari 3 - unstyled
Safari 3, unstyled.

Safari 3
Safari 3, styled.

Picking apart the differences, we see:

  • File inputs remain an awkward mess to deal with. Opera at least attempts to retain consistency with the state of other elements by replacing the native button widget, but overall, it’s still the most obvious barrier to cross-platform visual consistency. Except for the width property, Firefox completely ignores CSS rules for file inputs.
  • Safari provides a hybrid select menu which retains the general shape and configuration of the Mac-native widget, but adopts the border, font, and color preferences indicated in the stylesheet. It’s interesting to note that Apple chose to use Mac-native form widgets for the default display in the Windows version of Safari as well as the Mac version. Apparently they decided it was more important for Safari to always look like Safari than for Safari to provide OS-native widgets on Windows.
  • Firefox and Safari ignore CSS rules on checkboxes and radio buttons, retaining the default appearance. Opera replaces them with fairly nondescript custom widgets that are likely a little easier to integrate with heavily themed form layouts.
  • Firefox continues to provide the greatest control over option elements. You can even float option elements within a select (this is not new in version 3, btw). As a test, I used this to mimic the control in Apple’s iCal where you select which days of the month an event should repeat, visually conveying a calendar grid while still using the most semantically correct markup for the task at hand. If only other browsers offered this degree of flexibility.

While not perfect, this seems like a big step in the right direction. Let’s see how things look in the same browsers on the Windows platform.

Firefox 3 Win, unstyled.
Firefox 3 (Win) unstyled.

Firefox 3 Win, styled.
Firefox 3 (Win), styled.

Opera 9.5 Win, unstyled.
Opera 9.5 (Win), unstyled.

Opera 9.5 Win, styled.
Opera 9.5 (Win), styled.

Safari 3 Win, unstyled.
Safari 3 (Win), unstyled.

Safari 3 Win, styled.
Safari 3 (Win), styled.

Not bad, huh? Apart from some very minor differences in alignment, padding, and antialiasing, the displays are very consistent. My Ubuntu virtual machine is busted, so I can’t provide Linux comparisons. I can only hope the results are similar in the browsers available for that platform. And so, to wrap up…

What was that? What about Internet Explorer, you say, still the most widely used browser on the ‘net? I was hoping you wouldn’t ask. I certainly don’t consider it a “next generation” web browser, so even though I think it’s fair to exclude it from this discussion, here goes:

Explorer 7, unstyled.
Internet Explorer 7, unstyled.

Explorer 7, styled.
Internet Explorer 7, half-assed.

No big surprise that it’s the least like any of the other browsers tested. Heck, it doesn’t even apply the same rules consistently to its own elements. I think I see about seven different border styles in that last screenshot. And look at how the background color on the fieldset element extends outside the border. What a disaster. I can’t believe Microsoft even bothered to ship this pathetic excuse for a browser. The only positive thing I can say about IE7 is that it’s marginally better than IE6. It’s like they’re using their desktop monopoly to halt the progress of web standards dead in its tracks. Sigh.

p.s. — If you want to play around with the page I used to create these screenshots, you can grab the HTML and CSS here.


Be Sociable, Share!

One Response to Styling Form Controls: Next Gen Browsers Let Us Decide.