Garrett LeSage's weblog
« What is the Meatrix?
C:\MYCAMERA> CAMERA.EXE_ »

Firefox form widges: nice & generic

Steven Garrity and I talked about Firefox a lot at the GNOME Summit. We talked briefly about my Industrial-like form widgets for Firefox and Kevin Gerich’s own custom widgets too and arrived on the conclusion that a small, tweaked version of forms.css would probably be more likely to be accepted at this point in time.

I did a few tweaks to make the buttons, text inputs, textareas, checkboxes, and dropdowns look a lot better, all without changing the size. They were done in a way which should hopefully not conflict with website styling. (Although there might be bugs.)

the before image
Before the changes (ugly)
the after image
After the changes (much better)

I’ve also made an animation to compare the two, but decided not to display it inline as it is a bit much. It’s still neat to see, so I’d recommend clicking the link (but you have been warned).

There are a few things I’d like to do to it still…
* Make the radio buttons look nicer somehow
* Add a depressed-looking button-down state

I’ve also made my modified forms.css available.

So, what do you all think? Have any suggestions?

This entry was posted on Wednesday, October 13th, 2004 at 6:14 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

9 Responses to “Firefox form widges: nice & generic”

  1. Vincent October 13th, 2004 at 6:38 pm

    These look great.
    Even better, if you install the forms.css in your mozilla directory, the upgraded widgets appear in epiphany/galeon… So everything looks gnome-y :-)

  2. Brad October 13th, 2004 at 7:04 pm

    Wow. This rocks. Huge improvement. Thanks Garret.

  3. Josh October 13th, 2004 at 7:59 pm

    I dig the animation, Garrett. Have you ever considered a career in the motion picture industry? ;) Nice improvements. Got this working in windows yet? *hide*

  4. Garrett October 13th, 2004 at 8:20 pm

    It should work in windows if you make sure moz-appearance is set to none for the form widgets, I think. *g*

  5. Sean October 13th, 2004 at 9:11 pm

    I think the text entry box looks a bit hard to distinguish, but that’s just me… If I just glanced at it, I don’t think it would be immediately obvious that I could type in there…

  6. Nathan Nutter October 13th, 2004 at 10:08 pm

    I know you mentioned improving the radio buttons and I think this is important. I think the radio buttons and the check boxes should have the same feel. I do like the pics at http://kmgerich.com/ and I think Sean is right about the text box while the old one is horrid, this new one is not real clear. Maybe try having the depth on the top and left but keeping the definition around the bottom and right.

  7. Thorsten Ball October 14th, 2004 at 12:23 am

    Good work! Looks much better now. Thank you. :)

  8. Nico October 14th, 2004 at 3:20 am

    That’s great! Finally the forms are not looking like Netscape 4 on GTK 1 anymore!

  9. z-vet October 15th, 2004 at 12:42 am

    I use it and i love it! Thank you,Garrett.