Beginning on October 25th, 2016, Persona will no longer be an option for authentication on BMO. For more details see Persona Deprecated.
Last Comment Bug 304548 - CSS in form elements is a crapshoot
: CSS in form elements is a crapshoot
Status: NEW
: testcase
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Other Branch
: PowerPC Mac OS X
: -- normal with 1 vote (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2005-08-13 08:37 PDT by Garrett Smith
Modified: 2010-04-27 01:58 PDT (History)
3 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

compare div and input elements using display: block (1.57 KB, text/html)
2005-08-13 08:40 PDT, Garrett Smith
no flags Details

Description Garrett Smith 2005-08-13 08:37:40 PDT
Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b4) Gecko/20050726

CSS in form elements is a crapshoot.

Different results in different browsers. 

Button elements:
 * Different amounts of extra padding for in Mozilla, Opera, and IE.
 * nested floats don't work right, e.g. <button
style="float:left;position:relative"><div style="position: absolute;left:

Mozilla does not change the display of form elements to block (or inline, or
table-cell, et c). Instead, it exhibits an undefined, unocumented behavior.

For example
<button style="display: block; border:1px solid

Expected Result: 

Changing the display of a form element should result in an element that is
visually rendered according to that display. No checkbox indicators for
checkboxes and no extra padding for buttons or input type="button". Unless the
author uses display: auto.

If display: block is specified, the UA should display a block-level element. 

The only exception to this could be the input type="file", and only for security
Comment 1 Garrett Smith 2005-08-13 08:40:07 PDT
Created attachment 192602 [details]
compare div and input elements using display: block

The div elements look fine.

The input type="button" elements have too much padding.

The checkbox is not displayed as a block element, but instead as a checkbox.

The button element has too much padding.
Comment 2 David Baron :dbaron: ⌚️UTC-7 (busy until November 7) 2005-08-13 12:28:27 PDT
I argued against making form elements stylable without a coherent plan.

(IMO, the form controls should have their own 'display' values and should be
unstylable unless 'display' is changed.  But it's way too late for anything that

At this point it would be more useful to have one bug per issue.  A bug that
complains about large numbers of problems without describing any of them clearly
is less likely to get fixed.  (Unless, of course, somebody starts by designing
how it should work...)
Comment 3 David Baron :dbaron: ⌚️UTC-7 (busy until November 7) 2005-08-13 12:29:35 PDT
(In reply to comment #2)
> I argued against making form elements stylable without a coherent plan.

Not in advance, though, but not too long after it was done.
Comment 4 Garrett Smith 2005-08-15 08:51:25 PDT
Property:      -moz-form-css:
values:        auto|no-override|override|inherit
initial value: inherit
Applies to:    Form control elements


If the value is auto, the form elements are rendered according to the
user agent. The user agent may apply some styling to the form elements

If the value is set to no-override, then the user-agent must not allow
styling of any elements

If the value is set to override and the element's display is set to any value
other than "auto", the element will be rendered according to the css.

The default value is inherit. This allows authors to set the property
on individual forms, a section of a form containing special
author-designed inputs, or on the entire form.

For example:
<form style="-moz-form-css: override">
<input type="checkbox" style="display: block; height: 12px; width: 12px;
background: orange;" />

Would result in an orange block with no checkbox indicator. The checkbox could
receive focus and be checked. To create a visual "checked" effect, the developer
would have to use the :checked pseudo-class, perhaps to use a custom check

checkbox:checked {
    background: url(checkbox_checked.png);

Note You need to log in before you can comment on or make changes to this bug.