Pretty Widgets
Inspired by Jon’s attempt to make Mac Firefox HTML form widgets a little easier on the eyes, I’ve taken a shot at making a set of widget styles that blends with Mac Firefox. It has focus rings too!
Instructions: Download the userContent.css file and copy it to your ~/Library/Application Support/Firefox/Profiles/(profile name)/chrome folder. Or add the code within to your existing userContent.css file. It’ll look best on a recent Firefox branch build.
Comments 41
Linked from
- elblogg
- Smallpiece
- micampe.it
- risckyBabble
GURT
those are hot. just for Mac or will that work with Windows builds as well?
mmm sugar.
Ryan S
Great work! One less reason for Mac people to use Safari over Firefox.
Ben
Dude. Figure out how to do this as a patch to the existing Mozilla code for Mac-only and do all the widgets, and we'll slurp this up.
Asaf Romano
Kevin, why not use the new images for buttons from http://hicksdesign.co.uk/journal/551/native-looking-firefox-os-x-widgets
Luke Shingles
I need to stop visiting this blog, it's making me want to buy a Mac.
Kevin
GURT, I'm not sure if this will work with Windows or Linux. Windows uses -moz-appearance to style the HTML form widgets based on the OS theme.
Asaf, Jon's buttons using the image backgrounds look great but they don't scale. They also don't change colors when you change the theme. I want to create styles that don't necessarily copy the Mac buttons pixel-by-pixel, but are a little nicer than the primitive widgets that we have now.
Stephen Duncan Jr
It does affect Windows. But it doesn't work quite right (I assume, since I can't see what effect it actually has on a Mac).
Input and text areas dissapear when selected, there's no hover effeect on buttons, etc.
Jon Hicks
Nice one Kevin, they remind me slightly of Opera's own widgets. Nice style!
Asaf- Kevin's right. The ones I came up are seriously limited.
Kevin
Stephen, oh that's right. The focus rings have a style called -moz-mac-focusring which is probably not available on Windows :) For the button backgrounds, I use an image from the Pinstripe theme that doesn't exist in Winstripe.
Kevin
Can everyone please take a few minutes to test these styles on various web sites, especially those that apply CSS to form widgets? I'd like to make these styles not stomp on web page CSS too much. for that reason I'll probably lose the gradient background image on buttons.
Chris Moritz
Looks great. The day draws near where I might actually consider ditching Camino for Firefox. Can't wait!
Stephen Horlander
Fields look strange if they have a background color set. You can see the white part of the shadow.
Kevin
Example URLs? :)
Stephen Horlander
Mozilla.org the search field.
Stephen Horlander
Even better :)
http://www.fred.net/dhark/demos/css/css_form_val_exp.html
Kevin
Ow, my eyes! :) OK, two problems: First, I'm using -moz-border--colors to get the sunken Mac OS X text field look. It seems that web page CSS border colors do not override my -moz-border--colors rules.
Seeing that Safari doesn't allow CSS in form fields at all, this might be acceptable. I could explicitly set a white background but I don't want to override any more styles than I have to.
Josh Hughes
Another heavily styled form: http://www.picment.com/articles/css/funwithforms/step5.html
Regardless, I really like the style. Thanks for putting it together :)
Josh
Macskeeball
This is beautiful!
Joel
http://wwwa.accuweather.com/adcbin/public/radar_menu.asp?partner=accuweather
The drop down radar menus are unreadable unless you are highlighting or mousing over an option. They sure look nice though ;-)
Macskeeball
Joel, I fixed that issue by adding the following (the Lucida Grande part isn't required)...
"input, button, select, texarea { font-family: "lucida grande" !important; color: black !important;
}"
Kevin, if you'd like I can slim down that CSS for you (minus my changes unless you want them). I think the same effects can be produced with less code and it makes sense to make Firefox as fast as possible. Just send me an email if you're interested and I'll be more than happy to help.
Macskeeball
After a little browsing, I've come to the conclusion that it would actually be better to use the following code instead of what I posted above...
"input, button, select, texarea {color: black !important; background: white !important;}"
Do not specify a font because it will make some form elements larger than intended.
Ethan
Lovely work, Kevin — thanks so much.
Now, if we only had proper tabindex support for these sexy form fields... ;)
Kevin
Macskeeball, feel free to share any changes :) I've made a lot of changes myself and will post them soon.
Rob Mientjes
The Windows users are drooling ATM, so I'm looking for a way to mimic these in FF/Win. I'll keep you updated.
Kevin
To Ethan and anyone else who wants to tab to all fields in Mozilla or Firefox:
You might have to restart the browser.
Ethan
Kevin, you're a rockstar — I'd been missing this functionality since moving to the Mac. I've updated my user.js file with the accessibility.tabfocus value, and things are working wonderfully.
Is there a reason this feature is disabled by default on the Mac?
Michele Campeotto
Kevin, it works and looks wonderfully in Linux too, but It seems to have a problem with selects, I have to either click them thrice or keep the mouse clicked for about half a second (this is FF 0.9.3).
This is weird, I'll have a try on my Mac when I get home.
mic
Riscky Abacus
Check out compusa site... button text is missing!
Macskeeball
Ok, Kevin. I've optimized the code, made it a little more consistent, added the enhancement I posted above, and corrected typos made by both you and me: http://macskeeball.no-ip.com/forums/tjp/userContent.css
Stephen Horlander
I also noticed a weird problem with selectable lists that are scrollable and not dropdowns.
Such as: http://bonsai.mozilla.org/cvsqueryform.cgi
Macskeeball
I see no such problem with my version, Stephen.
Stephen Horlander
Hmmm, well I tried both version and still get this:
http://www.noved.org/~stephen/public_files/select_with_size.png
Asaf Romano
Hi Kevin,
With the first version (I didn't check anything else... not yet) I see an issue on mozdev's search button.
You can see an example here: http://bidiui.mozdev.org (see the search button in the top right corner).
BTW: I think the borders should not apply image buttons, but I'm not sure if we can always handle this (since you can't use css selectors "on" css values :-/)
Mano.
Macskeeball
What version of Firefox are you using, Stephen? I'm using the September 12th nightly and don't see that.
David
Very nice. I hope this gets officially added to the Mac version of Firefox. :)
Jinketsu
Wow, much better.
These remind me of the buttons in the Milk theme. I haven't encountered many problems. Some list menus seem to have scroll bars though.
I hope these get used for the Mac version as well.
sea bass
Is it just me or do these buttons not have a 'down' state? Using Asa's Firefox 1.0RC-RC (or 0.10rc if you must) ;)
frank
Here's a site that kind of trips up on this mod:
http://www.pointroll.com/ShowCase/ShowCase.asp
If background colors will be forced to be white/light gray, then the foreground color should be forced, as well, to prevent any white text on light gray fields like in the above example.
Hendrik
This is really great!
Jennifer
I am seeing a border added to links that I click on on Livejournal (like "comment to this post" links and such). The border appears shortly after I click and stays there until the page changes to the new URL. This is annoying and highly visible against the dark grey background of the style I set. Is there a way to remove this?
Also, wtf is with the comment above this one?
Jennifer
... my comment is now referring to something that is not loading anymore ... and I forgot my build info anyway.
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.3) Gecko/20041003 Firefox/0.10