Form elements and CSS, summary
Current web forms e.g. in blogs do not need to keep consistent appearance in different browser. Small differences can even appeals as positive impression. Web and intranet applications are something else. Pages of applications are not based on text, but tables, graphs, diagrams, menu and forms. Forms are often part of reports, or graphs and need to be designed with pixel accuracy.
Top management of companies are out of opinions of web ideologists: "do not style forms!!!". Even slightly different look of reports is for these persons verification of designer inability. Besides my reason, slightly distinct look of web application, can not only confuse and complicate user orientation, but in final incidence worsen form usability.
Purpose of study in this article is to find out, whether it is possible to create form looking identical in current browsers. For this purpose was created compact mini-form containing all form elements except input type="file". Individual form fields "labeling" is skiped here.
Miniform on the right is live and it is possible to fill in by random text and test that. It is not possible to post form to processing, or carry on validation of form values. Target is to get form view in your browser and compare this with screenshots of the same form in other browsers.
First of all border of form elements are removed and then new border is created by the help of table dark background. One-pixel space between form elements, which creates border is obtained thanks to attribute cellspacing="1px" in element table. It is possible to format the form also in the elements div, principle is the same. Some elements form have set-up property background, which switch specific appearance of these elements to the standard classic look. Such elements are better styled for uniform shape in different browsers.
Fix formatted form have to use uniform box model for size element calculation. Therefore IE browser have to be switched-over to the standard mode by prologue listed in preface of code example. Further fixed font size in pixels is set-up. Font in form elements is not inherited, and need to be defined as in code example. According to font size, uniform height of elements is determined (in our instance 18 pixels). The smallest possible height for given font is 16 pixels, not to cut off characters bottom.
Not styled texbox in IE, when reducing the height below certain limit, happens interesting effect. Text in element is shifted (pulsed) few pixel up and down. I did not examined this effect in detail.
Following CSS code was used for form look unification. Each form element setting is discussed later. Dimensions of textBox and textArea are calculated in a different way than dimensions of elements select and submit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<style type="text/css">
input, select, textarea, td {font: normal 13px Arial; color: black;}
table {table-layout: fixed; width: 113px;}
td {width: 113px; padding: 0; margin: 0; border: 0; background: #e7e7e7;}
.textBox {width: 105px; height: 18px; margin: 0; border: 0; padding: 0 4px;
float: left; background: #ffa;}
.textArea {width: 109px; height: 74px; margin: 0; border: 0; padding: 0 0 0 4px;
float: left; background: #ffa; overflow: auto;}
.selectBlock {width: 113px; height: 18px; border: 0;
position: relative; overflow: hidden;}
.selectInput {width: 117px; height: 22px; top: -2px; left: -2px;
position: absolute; color: black; background: #ffa;}
.checkBlock {width: 109px; height: 18px; margin: 0; padding: 0 0 0 4px;}
.checkInput {width: 15px; height: 14px; margin: 0 7px; padding: 0;}
.button {width: 113px; height: 22px; background: #ddd; border-width: 1px;}
</style>
Notes to CSS of single elements
input type="text"
This element has the same size in all tested browsers. Higher elements in IE and Safari, which occupy 2 pixel larger vertical space were unified by property float: left;. With reference to possibility of text cursor disappearance at right margin, padding: 0 4px; was set-up. Inner width of element textBox is calculated to width: 105px;. Overall width is then 105+2*4=113 pixels.
textarea
Also in this case for removal of empty space around element in IE and Safari property float: left; was used. Setting padding 0 0 0 4px; provides text indent only on the left side of element and affects setting of inner width of element to width: 109px;. Overall width of element is 109+4=113 pixels. Vertical scrollbar in Opera is not possible to remove by help of CSS.
select
For borderless select element, was used experimental solution. Select is rendered including border, but borders are hidden behind dimensional smaller element div, which hides original border. Because border is 2 pixel width, dimensions of element select are 4 pixels bigger in both directions.
Beauty defect is bug in browser FireFox 2, which causes that rendered element select is 2 pixels higher than is set-up by CSS. That is why lower part of button is cut off. Version FireFox 3 already calculates good height.
input type="checkbox" a input type="radio"
In article checkbox and radio was proved, that these elements are in essence "not styleable". It happened to place these elements along with text to the lines of height 18 pixels, but vertical alignment is far from satisfactory. Questionable is element size change, finding real needed space and alignment setting.
input type="submit"
This element makes minimum problems at form look unification. Switch-over to classic appearance by using property background: #ddd; greatly simplify situation. Next simplification is the fact, that element dimensions are calculated according to another box model. All you need is to determine final proportions element.
updated 31.12.2007