DRÄ Studio

Pixel pushing and pencil shavings

Home Blog Projects Wallpapers Themes Fonts


How to customize form elements like Apple

Posted on Wednesday, September 24th, 2008 under Code Design | No comments

or maybe an even better question: Should I customize my form elements like Apple? Let me explain.

Apple Custom Form Elements

The Dilemma

Up until recently, I haven’t really worked too directly with the <form> elements, but when finding that I needed to add more screen sizes for the Desktop section of my page on this site (as well as wanting to expand on the demonstrations I offered in my GWD classes), I decided to implementing drop-down listings, using the <select> element.

As much of a benefit as I and visitors to this site have found in this addition, it has always been limiting rely on the Mac GUI to define the appearance of the form elments. Don’t get me wrong. I have been a big fan of the jelly-bean gloss since 10.1, but its appearance smack dab in the middle of my carefully crafted visual elements is almost as bothersome as an unwanted scrollbar popping up to the left of the window. Not as bad, but pretty close. When I say how Apple had implemented an entirely different look with the Country selection menu on their homepage, I thought “Finally! A way out of this limited abyss!”

The Mystery Revealed

After making a slight usability revision to the options listed in each of the <select> elements, I decided to dive into Apple’s style-sheets and see what sweet and syrupy magic was allowing them so much freedom with their form element. Sadly however, this excursion ended just like all investigating into a magician’s tricks do … disappointingly.

It seems that where I thought Apple's web team would be employing some fancy Javascript replacement or new-fangled CSS 3.0 "make-it-look-awesome" feature to achieve their drop-down menu look, it turns out that instead, they have simply covered up an ugly kitchen table with a freshly fragranced and crispy clean white cloth (so to speak). A glimpse into their style-sheet and we can see that all that is happening is that the image of this new pretty form element is being placed as background image to the main <select> element!

#worldwide form#worldwidelinks {
     padding: 2px 0 0;
     float: left;
     width: 196px;
     height: 19px;
     margin: 0 0 50px 8px;
     background: #fff url(.../worldwide_grey.png) no-repeat 0 100%;
     color: #fff;

#worldwide form#worldwidelinks select {
     width: 196px;
     margin-top: -2px;
     opacity: 0;

Simple, straightforward and kinda almost cheating ... well, not really. But it does feel a bit too easy for them to have done and nobody else have known about it (at least, I didn't). I also included a second CSS rule in the example above, in case you are wondering how they "hide" the default look of the <select> element.

The Payoff or really, the Tradeoff

With a solution so un-complex and readily available, you may be asking yourself why I haven't implemented it onto the menus for this site. And the answer is one I am sure you are familiar with ... really, Dr. Horrible said it best: "It's about standards". Or more specifically, web standards. And even more specifically, web standards as they relate to accessibility.

The one fatal flaw you will find with Apple's super spiffy <form> is that with a browser's images set to not display, use of the menu is completely unavailable. Uh, yeah. That's right. Completely unavailable. Granted, I am sure Apple's developers are taking into assumption that if the user is browsing without images, they are most likely also browsing without CSS-enabled and everything is hunky-dory. I could almost even go as far to say that theirs is a safe assumption ... but from personal conversations, I know better. There are plenty of people that run sans-images but that don't intend on removing site styles altogether.

Where does that leave us (the collective) and me (the particular)? I'd love to hear some of your feedback on how much of an issue (or non-issue) you find this to be, but for this site, I'm going to hold off on jumping into such a blind boat until a better solution is available. And frankly, I am also going to be working on revamping the current navigation system I am utilizing, as it suffers from some of the same issues. Eep!

Related Posts:

Valid flashiness?
Since I haven't used it anywhere yet, but plan to soon, I figured I'd post the cool valid XHTML code I found for using Flash elements. And since, for some reason Blogger does not seem to be letting me add "code" or "pre" elements easily ... just take a moment and peep the code here. ...
Exchanging a slow Safari for Firefox 3.5
Despite how much I love the new Safari 4 features, I have been experiencing some really poor performance as of late ... specifically, a 3-5 second stall at every new window launch, new tab or trying to scroll through a part of a page I had not been using previously. Though it may be due ...
How to implement an iPhone-specific stylesheet
I am a little late to the game on this, but recently I was creating an iPhone screen optimized version of a site for my personal usage and thought I would share some of my findings. The InitialThough Apple recommends through the expansive information in its iPhone Developer Connection to implement CSS3 conditional statements to effectively ...
Scrapped Plans
Secret Friend Society by DraStudio on ZooomrIn light of the recent Dra Studio re-design, I thought it might be fun to share some of my ruminations and recent thoughts about back-end content management systems and such that I saw as possible solutions for both the this site and the Illustrative. site, but for some ...
Google Chrome on the Mac
It has been a few days now since Ars Technica announced Google's Developer Preview for Chrome on the Mac and I have been loving every minute of it. While I do miss the robust plugin architecture of Firefox and the slickness of Safari 4's "Top Sites", Chrome's speed trumps all. New tabs and windows are quick ...

Write a comment

Your e-mail address is never published nor shared. Required fields are marked *






Back to Top