Mac-like Form Controls for Firefox

select controls with various CSS rules appliedThe 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.

22 thoughts on “Mac-like Form Controls for Firefox”

  1. 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… :-).

  2. 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 🙂

  3. 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.

  4. 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 😉

  5. 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.

  6. 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.

  7. All of a Sudden…

    All of a sudden, Kevin Gerich is back and posting on his newly-redesigned blog. Hopefully this means we’ll get to watch the evolution of the new Firefox 2.0 UI.


  8. 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.

  9. […] 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> […]

  10. 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.

  11. thanks!
    [URL= ]Buy Fioricet[/URL] [URL= ]Buy Meridia[/URL] [URL= ]Buy Vicodin[/URL] [URL= ]Buy Tramadol[/URL] [URL= ]Buy Alprazolam[/URL] [URL= ]Buy Xenical[/URL] [URL= ]Buy Didrex[/URL] [URL= ]Buy Valium[/URL] [URL= ]Buy Adipex[/URL] [URL= ]Buy Ultram[/URL] [URL= ]Buy Ambien[/URL] [URL= ]Buy Hydrocodone[/URL] [URL= ]Buy Zoloft[/URL] [URL= ]Buy Soma[/URL] [URL= ]Buy Levitra[/URL] [URL= ]Buy Lortab[/URL] [URL= ]Buy Phentermine[/URL] [URL= ]Buy Viagra[/URL] [URL= ]Buy Diazepam[/URL] [URL= ]Buy Xanax[/URL]
    Buy Fioricet Buy Meridia Buy Vicodin Buy Tramadol Buy Alprazolam Buy Xenical Buy Didrex Buy Valium Buy Adipex Buy Ultram Buy Ambien Buy Hydrocodone Buy Zoloft Buy Soma Buy Levitra Buy Lortab Buy Phentermine Buy Viagra Buy Diazepam Buy Xanax

  12. Gay movie [URL=]Gay movie[/URL] Gay movieGay teen [URL=]Gay teen[/URL] Gay teenSexo gay [URL=]Sexo gay[/URL] Sexo gayGay bar [URL=]Gay bar[/URL] Gay barGay pic [URL=]Gay pic[/URL] Gay picGay man [URL=]Gay man[/URL] Gay manGay black man [URL=]Gay black man[/URL] Gay black manBlack gay man [URL=]Black gay man[/URL] Black gay manFree gay pic [URL=]Free gay pic[/URL] Free gay picGay oral sex [URL=]Gay oral sex[/URL] Gay oral sexGay chat [URL=]Gay chat[/URL] Gay chatGay lesbian [URL=]Gay lesbian[/URL] Gay lesbianGay gating [URL=]Gay gating[/URL] Gay gatingFree gay video [URL=]Free gay video[/URL] Free gay videoGay sex [URL=]Gay sex[/URL] Gay sex

  13. Drug valium [URL=]Drug valium[/URL] Drug valiumValium [URL=]Valium[/URL] ValiumCheap phentermine [URL=]Cheap phentermine[/URL] Cheap phentermineBuy phentermine [URL=]Buy phentermine [/URL] Buy phenterminePhentermine pharmacy [URL=]Phentermine pharmacy[/URL] Phentermine pharmacyTramadol 180 [URL=]Tramadol 180[/URL] Tramadol 180Cialis side effects [URL=]Cialis side effects[/URL] Cialis side effectsPhentermine pill [URL=]Phentermine pill[/URL] Phentermine pillPhentermine online [URL=]Phentermine online[/URL] Phentermine onlineBuy valium [URL=]Buy valium[/URL] Buy valiumPhentermine diet pill [URL=]Phentermine diet pill[/URL] Phentermine diet pillTramadol online [URL=]Tramadol online[/URL] Tramadol onlineBuy tadalafil cialis [URL=]Buy tadalafil cialis[/URL] Buy tadalafil cialisPhentermine cod [URL=]Phentermine cod[/URL] Phentermine codCialis levitra [URL=]Cialis levitra[/URL] Cialis levitraDrug tramadol [URL=]Drug tramadol[/URL] Drug tramadolPurchase phentermine [URL=]Purchase phentermine[/URL] Purchase phenterminePhentermine side effects [URL=]Phentermine side effects[/URL] Phentermine side effectsBuy online tramadol [URL=]Buy online tramadol[/URL] Buy online tramadolValium online [URL=]Valium online[/URL] Valium onlineBuy phentermine [URL=]Buy phentermine[/URL] Buy phentermineBuy tramadol [URL=]Buy tramadol[/URL] Buy tramadolBuy phentermine [URL=]Buy phentermine[/URL] Buy phentermineViagra cialis levitra [URL=]Viagra cialis levitra[/URL] Viagra cialis levitraBuy online phentermine [URL=]Buy online phentermine[/URL] Buy online phenterminePhentermine adipex [URL=]Phentermine adipex[/URL] Phentermine adipex phentermine online [URL= phentermine online][/URL]Online pharmacy valium [URL=]Online pharmacy valium[/URL] Online pharmacy valiumBuy cialis generic [URL=]Buy cialis generic[/URL] Buy cialis genericCialis [URL=]Cialis[/URL] Cialis

  14. great schools [URL=]great schools[/URL] great schoolseducational toys [URL=]educational toys[/URL] educational toysparaprofessional education [URL=]paraprofessional education[/URL] paraprofessional educationeducation supplies [URL=]education supplies[/URL] education suppliesonline doctorate education [URL=]online doctorate education[/URL] online doctorate educationonline education advantages [URL=]online education advantages[/URL] online education advantagesonline patient education [URL=]online patient education[/URL] online patient educationonline education articles [URL=]online education articles[/URL] online education articlesonline high school education [URL=]online high school education[/URL] online high school educationonline education program [URL=]online education program[/URL] online education programonline continuing education [URL=]online continuing education[/URL] online continuing educationnortheastern university online [URL=]northeastern university online[/URL] northeastern university onlineuniversity of florida online [URL=]university of florida online[/URL] university of florida onlineonline college degree programs [URL=]online college degree programs[/URL] online college degree programscheap online degrees [URL=]cheap online degrees[/URL] cheap online degreesonline associate degree programs [URL=]online associate degree programs[/URL] online associate degree programsonline marketing degree [URL=]online marketing degree[/URL] online marketing degreeonline english degree [URL=]online english degree[/URL] online english degreeonline pharmacy degree [URL=]online pharmacy degree[/URL] online pharmacy degreeonline computer science degree [URL=]online computer science degree[/URL] online computer science degreebsn degree online [URL=]bsn degree online[/URL] bsn degree onlineonline degree program [URL=]online degree program[/URL] online degree programpalomar college online [URL=]palomar college online[/URL] palomar college onlineonline college tuition [URL=]online college tuition[/URL] online college tuitioncolorado community college online [URL=]colorado community college online[/URL] colorado community college onlineapply to colleges online [URL=]apply to colleges online[/URL] apply to colleges onlineholyoke community college online [URL=]holyoke community college online[/URL] holyoke community college onlineonline college ranking [URL=]online college ranking[/URL] online college ranking< a href="" rel="nofollow">hs diploma online [URL=]hs diploma online[/URL] hs diploma online [URL=][/URL]

Comments are closed.