The appearance of HTML form controls leaves a lot to be desired; they look like bad examples of Windows 3.1 widgets, and make no attempt to respect platform conventsions (despite the list box still using a native scroll bar) This is a catfood item for me.

Uh huh. They suck. Personally, I'd rather see this time be put into xblifying them (so they can look and feel like our chrome widgets, which our considerably nicer).

I agree they don't look great and eventually we will move them over to XBL. But isn't this German's issue or somebody over in the UI group? A good start right now to improve things would be to create platform specific forms.css files. Which I tried to start a thread in the UI newsgroup (or XPFE) many months ago, but nobody was interested. So, who is in charge of making the decision to change what is there?

I filed bug 67749 for making forms.css platform-specific, and volunteered to write the Mac version. Note that we'll need platform-specific forms.css even when we have XBL form controls (for OS-specific padding between controls, <fieldset> appearance, etc), so it's not as if we save time just by waiting for XBL form controls.

So, how about some pretty HTML form controls, guys?

*** Bug 47632 has been marked as a duplicate of this bug. ***

Make them look nice, everything else isn't very important for now. You can still do the magic and think about revolutionary new ways, if mozilla 1.0 is out. But for 1.0 I would suggest just making those form widgets match the Classic theme (and therefore the win32 native look). I use Linux and I would prefer a native Gtk look, but I think that's impossible because of different Gtk Engines. To please Windows users is the easiest thing for now. And copying an existing look as much easier, than to create something new. The advantages: - A clean and almost nice look and feel of the form widgets. Also it would look weird for Mac OS users... that's life. - Mozilla looks neat on win32 and that's the platform where the most important fight is fought. Well, I don't really care which solution will be used, but something has to be done. Soon. Those widgets look cheap.

An idea about using native plug-ins to draw XBLified widgets has surfaced a couple of times. Is anyone working on it? (Mac OS X users are going to want real Aqua widgets in forms and elsewhere. OmniWeb has Aqua form widgets.) Screenshots: http://www.pp.htv.fi/hsivone1/OmniWeb-form.png http://www.pp.htv.fi/hsivone1/Mozilla-form.png

I don't think it would take much to have it copy the platforms specific files per platform build. I think we should do it. Who needs to ok this?

Rod, you are the owner of the HTML Form Controls component. Fixing bug 67749 requires nothing more than a relatively simple change to the build config, which shouldn't affect any other components. So why do you think you need someone else to ok this?

Right. No-one needs to ok this. If you see a snake, kill it.

<al haig voice> I'm in charge and I give Rod full authorization to fix this. Make them not suck! </al haig voice> go for it! ;) ;)

Actually, I have everything set up to do this already for xbl form controls, and we could possibly leverage that work. The xbl-forms.css file for XBL form controls comes from xbl/builtin, which is already subdivided into mac and win dirs.

I'm still not sure this is worth doing without XBL form controls though. Without XBL, I don't think we can even come close to getting the Mac widget look, and wewon't be able to do much better on the Windows look than we're doing already.

I think it's worth doing. I'm sure the skin guys could whip up some CSS to make the old form widgets look 200% better in about an hour. This is low-hanging user- perceived-quality fruit.

Look better how? I think you underestimate the role XBL plays in enabling you to produce a better look. For example, without XBL, you can't even do a Win32 native border (since it has two levels).

I was able to get widgets that look more like 4.x by hacking the CSS; I know we can't do fancy borders, but at least we can eliminte those butt-ugly 2-pixel bevels everywhere.

[Ding!-dong!] ... Attention, passengers ... *** Bug 66749 *** is the bug for discussion of platform-specific forms.css. It contains concrete examples of how to make the form controls look nicer (not perfect, but nicer) using plain CSS without XBL. That's *** bug 66749 ***, leaving now at Gate 3A. Thankyou.

Ok, so I'm stupid. It's bug 67749, not 66749. Sorry. *sigh*

adding me 2 cc:

Moving to Future

the reason why the form-controls are ugly as hell is that inset,outset,ridge or groove painting for borders is not looking good. a solution would be solving bug 50699 .i think that would be easier to solve than waiting for xbl- controls ;-) so what do you think ?

The ugly days are over. Hyatt recently implemented -moz-border-top-colors (left,right, bottom too of course) which lets us specify a list of colors for a border. Using this, I have been able to make our form controls look GOOD. We can easily imitate the look of windows form controls, at the very least.

This patch is just an example, there is more work to do, but you get the idea.

I applied your patch, and that is what it looked like on my build. Did I miss something? Maybe there is something else you have to apply along with it?

There may be a problem with using -moz-border-colors: in html.css; consider a page whose form controls are styled inline with CSS. -moz-border-colors appears to override the border: colour, so the page's border colours will get lost.

This looks great.... Besides the radiobuttons (but that is probably why Joe left them out in his example) Why aren't these checked in yet? I understand the problem described in the previous but for the moment its a quick win since I expect that not many sites style form elements, at least not the border..

The problem with radiobuttons appears to be caused by a bug in the -moz-border-color code in combination with -moz-border-radius.

one year has passed, no progress in bug #57209 (XBL form controls) and still patch http://bugzilla.mozilla.org/attachment.cgi?id=60900 is lying around. Is the problem mentioned in comment #27 and comment #28 stil there? Otherwise I'd like to see the patch checked in as a temporary fix (what is temporary as xbl has no progress...)

Ronald: do form controls still look ugly for you? There were many considerable improvements in the look of form controls in 2002, though theming probably made this point moot for most of us :)

Rod no longer works on form controls for Mozilla.

I like most of the improvements, except one: the checkbox/radio focus style.

Shouldn't this be solved by using native theming for form controls like Win2XP does?

Just to be precise... the gui of mozilla/thunderbird/fire* looks great, it is just the controls in the html pages that do not look good. Even more precise, the borders of controls and the dropdown arrow on selects. The scrollbars on controls look good. Do you mean by 'use native theming' that it I could turn that on on linux or that it should be implemented?

Which Linux desktop and OS version? We do render some widgets and widget-parts using GTK code called via nsITheme. /be

Fedora 1.0 with extras Kernel 2.4.22 Gnome 2.4.1 GTK2 2.2.4 Metacity 2.6.5 2 screenshot attachements added. I'll try to make anotherone with the 'patch' applied btw. it is impossible to make a screenshot with e.g. target milestone in a dropdown situation, but that can either be a gnome or mozilla issue.

Screenshot of this bugpage with default L&F

Screenshot of query page with default L&F

Wow. That looks excellent. I have one question, though. Could certain X Windows themes' controls screw up the layout of web pages?

Whoever decides to work on this, note bug 264523 comment 4 which describes some of the issues with, e.g., using -moz-border-colors here.

Works on the three main platforms, guess this bug can now be closed.