Home/ Questions/Q 6979107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:50:37+00:00

Referring to both the button element and the input element with a type of

  • 0

Referring to both the button element and the input element with a type of button, I ran across a behavior I think is a bug (in recent releases of both Firefox and Chrome). But given how form elements are often exceptions to what I think are w3 rules, I thought I would ask for verification before assuming I am right.

The behavior is this: In standards-mode when I add a border to such an element, the border appears inside the width of the element. If I manually set the box-sizing to content-box (using vendor prefixes), the behavior does what I expect, but when the box-sizing is left as its default it is not content-box. Here’s a jsfiddle example. If you don’t want to go to jsfiddle, here’s the source code:

<!doctype html>
<html>
<head>
<title>Broken box model?</title>
<style>
body {
    padding: 30px;
    background: brown;
}
div {
    position: relative;
}
input {
    background-color: #CCC;
    font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    border: 0;
    width: 150px;
    height: 90px;
    margin: 4px;
}
input:hover {
    margin: 0;
    border: 4px solid white;
}
input:active {
    margin: 0;
    border: 4px solid white;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
</style>
</head>
<body>
    <div>
    <input type="button" value="I am a button" />
    </div>
</body>
</html>

Is this correct behavior, or have I stumbled on a bug?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Apparently this bug has already been reported to Chrome and Firefox. The loophole is that in both cases these elements have an initial value of box-sizing: padding-box set in their browser stylesheets. So it’s not technically a default value (initial != default). However, the only way to revert these elements back to box-sizing: content-box is using proprietary browser extensions for content-box, so there is not any truly CSS compliant way to do this. box-sizing doesn’t exist for CSS 2.1, and proprietary browser extensions are not valid CSS 3.

    • 0