HTML and CSS Reference
In-Depth Information
Figure 11.2
Radio buttons in Safari 5.0.1/OS X, Firefox 3.6.8/OS X,
Firefox 3.0.1.5/Windows, IE 8/Windows, and Opera 10.6.1/Windows
( from left to right) with a 100-pixel width, 100-pixel height, 1-pixel
red border, and 10-pixel padding.
To further complicate things, textareas, text inputs, and similar elements
aren't quite like the other elements since they follow the content-box
box sizing model, whereas other elements use the border-box model.
Setting the
box-model
property to
border-box
helps regain some consis-
tency in sizing between text inputs and selects and buttons, with the
drawback of making them behave less like the labels or paragraphs that
surround the fields.
form input[type="text"],
form input[type="password"],
form input[type="file"],
form textarea {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Like sizing, colors apply as you'd expect them to for text in elements such
as submit buttons, textareas, and password fields. On the other hand, the
behavior of radio buttons, check boxes, and select options will vary based
on the browser and platform, so consider the color to be just a sugges-
tion, not a rule.
