HTML form controls are very ugly




Layout: Form Controls
17 years ago
10 years ago


(Reporter: Simon Fraser, Unassigned)


Dependency tree / graph

Firefox Tracking Flags

(Not tracked)



(7 attachments)



17 years ago
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.


17 years ago
Keywords: nsCatFood

Comment 1

17 years ago
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 

Comment 2

17 years ago
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? 

Comment 3

17 years ago
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.

Comment 4

17 years ago
So, how about some pretty HTML form controls, guys?

Comment 5

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


17 years ago
Depends on: 58317, 67749
OS: Mac System 8.5 → All
Hardware: Macintosh → All

Comment 6

17 years ago
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.)


Comment 8

17 years ago
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?

Comment 9

17 years ago
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?

Comment 10

17 years ago
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! ;) ;)

Comment 12

17 years ago
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.

Comment 13

17 years ago
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

Comment 14

17 years ago
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.

Comment 15

17 years ago
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).

Comment 16

17 years ago
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.

Comment 17

17 years ago
[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.

Comment 18

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


17 years ago
Target Milestone: --- → mozilla0.9.2

Comment 19

17 years ago
Created attachment 34306 [details]
Some ideas to make CSS widgets looks less ugly. What do you think?


17 years ago
Target Milestone: mozilla0.9.2 → mozilla1.0

Comment 20

17 years ago
adding me 2 cc:

Comment 21

17 years ago
Moving to Future
Target Milestone: mozilla1.0 → Future

Comment 22

17 years ago
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 ?

Comment 23

17 years ago
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.

Comment 24

17 years ago
Created attachment 60900 [details] [diff] [review]
quick and dirty patch to make form controls look like windows

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

Comment 25

17 years ago
Created attachment 60908 [details]
screen shot - yes, that's mozilla
Created attachment 61004 [details]
This is what it looked like on my screen.

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?

Comment 27

17 years ago
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.

Comment 28

17 years ago
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..

Comment 29

17 years ago
Created attachment 62698 [details]
Test case

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


16 years ago
Depends on: 57209

Comment 30

15 years ago
one year has passed, no progress in bug #57209 (XBL form controls) and still
patch 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.
Assignee: rods → form
QA Contact: vladimire → tpreston

Comment 33

15 years ago
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?

Comment 35

14 years ago
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.


Comment 37

14 years ago
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'

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.

Comment 38

14 years ago
Created attachment 142589 [details]
Screenshot of this bugpage with default L&F

Screenshot of this bugpage with default L&F

Comment 39

14 years ago
Created attachment 142590 [details]
Screenshot of query page 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?


13 years ago
Blocks: 175279
Duplicate of this bug: 264523
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.

Comment 43

10 years ago
Works on the three main platforms, guess this bug can now be closed.
Last Resolved: 10 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.