::[ Empty Spaces ]:: Wandering through, a journey within.

Form widgets in Gecko browsers

16.08 2004 - 00:08 utc +9 | Comments

One of the weaker points of the various Gecko browsers, and particularly noticeable on OS X, is the rather poor appareance of form widgets (input fields, submit buttons, textareas and others. Luckily, those are, like almost everything, styled with CSS, and can then can be improved by using the user style sheet (userContent.css, found in the profile folder). Jon Hicks opened the discussion on the subject a few days ago. In a follow up post, he offered some native looking submit buttons. While those are very nice looking, they suffer from one small problem: the buttons are fixed in size, based on one background image. If the text inside the button overflows the size of the image, it becomes rather poor looking.

Weaponed with the DOM inspector, and reading through the forms.css stylesheet (which controls the styling of form widgets in Gecko browsers), we found one pseudo-element that might provide an additional style hook:

*|*::-moz-button-content {}

This pesudo-element appears to control the inner line-box of submit widgets. Using some ‘sliding door’ technique, padding and background images would allow to build flexible buttons. Ideally, we would use the ::before and ::after pseudo-elements, but this doesn’t work on replaced elements in Gecko (see bug 169334). Anyway. Through some trial and error, we did manage to build some decent looking native OS X buttons. After testing we did notice some problems however. The buttons still suffered from a fixed height (problematic when one need to resize the text on some sites. Additionally, upon clicking on some links, a weird little widget would pop up at the top of the window, which would then crash the browser. We’ll have to check out the XUL references to find out what exactly that pseudo element does.

Back to the drawning board. In the end, we settled for a simple background image, and the use of rounded corners via the -moz-border-radius proprietary extension to style the buttons.

Improved submit buttons for Firefox.

The top image shows the ‘publish button’ in the Textpattern interface, the bottom image shows the submit button bellow the comments forms on Jon Hicks blog. Not yet really native, but a decent enhancement to the default widgets in Firefox anyway. The input widgets are styled as follows:

button, input[type="reset"], input[type="button"], input[type="submit"] {
background-color: #e1e4e7 !important;
background-image: url(aguaButton.png) !important;
background-repeat: repeat-x !important;
background-position: 50% 50% !important;
color:#101011 !important;
-moz-border-radius: .45em;
padding: .07em .25em !important;
border: 1px solid #c1c6cb !important;
border-bottom: 2px solid #8c9298 !important;
font-size:12px !important;
width:auto !important;
height:auto !important;
}

Most everything is set to !important to override whatever a site might have decided about styling those widgets.

Comments

1. Comment by: Anne — 20.08 2004 - 07:43 UTC+9   [ # ]

   Be aware that not all pseudo elements inside Mozilla style sheets are what they look like. Some of the are just hooks for C++ code and not really editable. (They might crash your browser, et cetera.)

   And not allowing generated content on a replaced element is a good thing and therefore the bug was marked invalid. (Generated content will generate elements inside the element they are applied too, if that element is replaced, nothing can be placed inside.)

2. Comment by: Philippe — 20.08 2004 - 09:29 UTC+9   [ # ]

   Ironically, the one input button that breaks is your Anne (the input[type="submit"] for your search form). You use negative text-indent on it – I have corrected my own user stylesheet to reflect this (text-indent:0 !important).

   As for the generated content on replaced elements, I agree with you. Additionally, assume it would work, one would need some positioning scheme, but there is bug 238072 to deal with…

Commenting is closed for this article. If you have anything to share, feel free to contact us.