Rendering rules for buttons · Issue #4081 · whatwg/html (original) (raw)

The spec right now says

The button element expected to render as an 'inline-block' box depicting a button whose contents are the contents of the element.

An input element whose type attribute is in the Submit Button, Reset Button, or Button state is expected to render as an 'inline-block' box depicting a button, about one line high, containing the contents of the element's value attribute, if any, or text derived from the element's type attribute in a user-agent-defined (and probably locale-specific) fashion, if not.

This doesn't really match browsers.

If you specify display: block, that is honored but the button itself still shrinkwraps. In Chromium I believe the button is a flexbox (inline-flex if display is inline-level?) and it has an anonymous child box that is the actual button. @tkent-google can you confirm/elaborate? What causes author styles to apply to the inner box? What happens if you click the outer box (doesn't seem to activate the button)? @MatsPalmgren @jwatt @bzbarsky what does Gecko do?

Some author styles such as setting a background causes the native theme (via -webkit-appearance) to be ignored and fallback style to be used instead. It's unclear to me which styles exactly trigger this, and if it's different for different controls. I found this for Chromium but it seems to unconditionally return the same value?

Overflow is clipped on input element buttons but not for buttons.