190
The CSS Pocket Guide
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 consistency 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; }
Colors, Backgrounds, and Borders 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 suggestion, not a rule.