HTML and CSS Reference
In-Depth Information
Working with Form Controls
As different as they can be from platform to platform, form elements on
the major desktop browsers tend to share the basic properties; sizing,
fonts, colors, and backgrounds all can be set as they would on any other
HTML element. Because some form controls are more complex than your
average block of text, how those properties are applied can be a bit pecu-
liar. There's no hard and fast rule covering where a border is drawn or
what parts of the select widget handle a color applied to it.
Safari will draw native form controls (the bubbly look on OS X) even
when some styles are defined. Set a border on the element to force
it out of the native mode and into one that takes other styles such as color
or backgrounds.
Form elements, like images, are inline replaced elements. For styling
purposes, it is best to think of them as rectangular boxes even when
they're “round” radio buttons or made of multiple parts like file input
fields. When setting the height and width of a form element, you're
setting the dimensions on the outer box. What the field inside that box
does to fill the space is out of your hands.
Although elements such as textareas and buttons fill the entire rect-
angular box, check boxes, radio buttons ( Figure 11.2 on the next page),
and file input fields reserve the specified space in the layout but scale
in varied ways to fill that space (or not really fill it, as shown in some of
these examples).
Search WWH ::

Custom Search