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.
* 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.
<button style="display: block; border:1px solid
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
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.
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...)
(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.
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.
<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