Mac-like Form Controls for Firefox
The Mac-like form controls seen in Safari and Camino look nice, but tend to ignore CSS styling. I wanted to see if I could bring more flexible form widget styles to Firefox, while staying close to a native look as seen in Camino.
Single select boxes were the most problematic. How do you fuse the aqua pill-like control with a CSS background or border color? I think the answer is: You don’t. I decided to abandon Aqua for my own hand-rolled look which hopefully is Mac-like enough to blend with the other controls, but flexible enough to look good when CSS styles are applied.
The look for the select box is created with semi-transparent PNG images that allow the background color to show through. You’ll notice the widget also respects your choice of either the Blue or Graphite OS theme. Here’s a build off the Firefox 1.8 branch with the new Mac widget styles. Check it out and let me know what you think.
Download: ff-kmgerich-2006-03-11.dmg.gz, 9 MB
If you want a less experimental build of Firefox with native looking form widgets, check out Neil Lee’s G4 and G5 optimized builds.
Comments 16
Linked from
- Life As It Comes
Rober Accettura
Very nice looking from the screenshot.
I need to switch over to my mac and give take it for a spin.
Philippe
Interesting approach. Thanks for sharing.
But it is a weird thing, those widgets. About half the mail I get for mines comes from people asking how to completely prevent author styling.
Out of curiosity, your build allows for things like submit buttons (input[type="submit"]) to be styled by the page author. Is that how things are shaping up when aqua widgets are enabled by default ? I can see a new market for alternate forms.css that prevent this... :-).
Kevin
Philippe, if you look at the latest Safari nightly builds, you'll see that they are going in the direction of allowing page author styles on form widgets. Giving more control to authors is a good thing, even though it may result in ugly color combinations :)
Isriya
Hi, I test your build.
The selection is look nice and Mac-ish enough. Anyway, I don't like the black inner border in focus state which dropdown menu is opened.
It also has problem with size (too height) in CNET front page.
alexking.org: Blog > Around the web
[...] Mac-like Form Controls for Firefox : pretty widgets [...]
riscky
I would love to roll this into my Intel builds (at least my 1_8_0_Branch builds... hmmm something to do...
Smokey Ardisson
From two years in the trenches in Bugzilla for Camino, my sense is that the vast majority of users want what Philippe mentioned, standard Aqua widgets all of the time and no styling. It's only authors who want to style controls to their liking.
Serving those two masters is an impossible task, and I'd prefer to side with the users on this one. A browser is officially a user-agent, after all ;)
bloom
If the goal is to be more Mac-like, i.e. to provide a quality and fairly seamless user experience for Mac users, than why not follow Safari/Webkit's lead?
Are the form controls on the Windows or Linux versions currently css stylable for web developers? If not, why not? Is not the goal of the Firefox browser to support web standards, including form controls, across platforms while taking into account the aesthetics of individual platforms?
It seems that Firefox developers could potentially compromise by having a user checkbox in Preferences, much like the one currently used for font preferences. (Firefox currently has a positive checkbox: "Allow pages to choose their own fonts.") Or, is that too much overhead/complexity?
Just my .02.
Kevin, great work with the widgets! I like the direction you're going here and hope that these will continue to be at least an option for Mac Firefox users and web developers.
Kevin
Impossible tasks are the most fun ;)
Maybe a "vast majority" of expert users would like to override author styling on form controls, but I'd wager that the typical Firefox user doesn't have a preference.
Kevin
Josh Aas is doing the hard work to transition Firefox over to actual Cocoa widgets, but his work isn't scheduled to ship with Firefox until 3.0 AFAIK.
Webdesign - CSS - xHTML - Mac - Design - RSS - Blog » Mac-like form controls for Firefox
[...] Mac-like form controls for Firefox: “Kevin Gerich points out his Firefox build including some nice, aqua like form controls.” [...]
Stephen Horlander
I actually like this approach better than the "Native" widgets. I put that in quotes because they certainly only give the most casual of appearances of being Native. If you use them you quickly realize they don't feel or behave as you would expect.
This approach gives the Widgets their own Aqua like flair and still allow some author customizability. It creates of compromise of sorts, between authors who want that control and users who want pretty form controls.
The Learning Curve
[...] theming work. No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [...]
Nathaniel Nutter
Is it possible to just roll this on top of a standard Firefox install? The reason is I would like to use 1.5 so I don't have to work about extensions breaking. Also I am on a MacBook and the Intel optimized FF2 build link is broken on that other website.
Kevin
I've posted this as a patch on top of the 1.8 branch. Of course you'll have to build Firefox yourself to use the patch. There's a very slim chance that it will make Firefox 2, but I'm not counting on it.
stoker
hi