Most developers get frustrated by the fact that they can't style form controls as they wish. The problem lies in the fact that form controls are not covered by the CSS specifications. CSS defines only the default display role of some form controls, such as input and textarea, by declaring them as inline-block elements. As result, browsers tend to apply their default algorithms and styles to form controls, making life really hard for developers. This post is a simple list of common problems and solutions encountered during my daily work with form controls.
Getting consistent element dimensions
Using width and height on controls such as input and select produces unexpected results. Browsers tend to display such elements as bigger or smaller than you expect. To get consistent element dimensions, you have to specify a given font size and family on the element in question. Remember that browsers do not use the same font size and family on form elements:
body {
font: 100% Arial, sans-serif;
}
input, select {
font: 1em Arial, sans-serif;
}
Using padding should also be considered carefully. By default, browsers already applies a certain amount of padding to some form controls, such as buttons. You should first reset this padding if you want to use this property:
input[type="submit"],
input[type="button"],
input[type="reset"] {
padding: 0;
}
Fieldset and legend
fieldset and legend come equipped with a series of default browser styles. The problem with these elements is that they're tightly coupled together, so if you specify a style on one element, this may affect the other one. For example, if you apply this global reset to fieldset:
fieldset {
margin: 0;
padding: 0;
border: none;
}
in some browsers you will see the legend element without its default indentation. The best thing you can do is to reset both elements, and then apply some individual styles to them. For example:
fieldset, legend {
margin: 0;
padding: 0;
}
fieldset {
border: none;
}
legend {
display: inline;
position: relative;
left: 0.5em;
}
Remember: normalizing the default display role of form elements may be helpful in some cases. However, in this case it may not be enough: in fact, browsers also use !important statements in their default style sheets, so you can use them as well to reset their styles.
Background images
You can easily apply background images to text input and text areas. Before doing so, you should always turn these elements into block-level elements:
input[type="submit"] {
display: block;
width: 120px;
height: 30px;
background: #444 url(btn.png) no-repeat;
color: #fff;
line-height: 30px;
text-align: center;
font: bold small Arial, sans-serif;
border: none;
}
File inputs
Styling file inputs with CSS only would be easy if all browsers supported the CSS3 opacity property. Unfortunately, this is not the case, so you're forced to combine CSS and JavaScript to achieve this effect, as explained here.
Vertical alignment
Since most form controls are inline-block elements, you can use the vertical-align property to vertically align them:
input, select {
vertical-align: middle;
}
If your elements are preceded by other text, such as the content of a label element, you should apply the aforementioned property also to these elements:
label, input, select {
vertical-align: middle;
}