CSS forms tutorial: default styles

The first thing to bear in mind is that CSS forms are not part of any CSS specification, so if something goes wrong, browsers are not responsible for the problem you encounter. More precisely, form elements are the result of mere conventions which come directly from the ancient days of the first browser war. For example, a submit button has a default appearance that varies from browser to browser. You can change this behavior with CSS, but the results you get aren't always guaranteed.

Why not? Because browsers apply their default algorithms to form elements or, more clearly, some of their default styles. For example, Firefox has the following CSS rules for the legend element in its default stylesheet called forms.css:

fieldset > legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static;
  float: none;
  width: -moz-fit-content;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  white-space: nowrap;
}

You can override these rules with your styles, but what happens in other browsers? If we don't know what kind of default rules or algorithms are applied to form elements, how can we override them? Since browsers use styles and algorithms that we don't actually now, a trial-and-error approach is often the best thing we can do. For example, in an earlier post I emphasized the fact that if we want to get consistent results with the height of text fields, we should always specify a font size and family for these elements.

This happens because browsers don't use the same font type and size used on the rest of our documents. Firefox uses these rules for text fields and, more generally, for input elements:

input {
  -moz-appearance: textfield;
  padding: 1px 0 1px 0;
  border: 2px inset ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-field;
  text-rendering: optimizeLegibility;
  line-height: normal !important;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  text-indent: 0;
  -moz-user-select: text;
  text-shadow: none;
}

As you can see, the default font in use is -moz-field, so if you don't specify a font for these elements, Firefox will use the aforementioned default styles. In a nutshell: we can't rely on the fact that browsers will behave exactly as we want if we don't specify some styles on form elements, thus overriding their default styles.