site logo

Form elements in older browsers and CSS

This page contains screenshots of form elements modified by CSS in older browsers. It is noteworthy to draw attention to elements in browser Safari 3 and Opera 9. Safari 3 for Windows used design typical for Apple, Safari version 4 takes over the appearance of the Windows motive. So we losed possibility to enjoy the taste of apple in Windows, sorry. Similarly, Opera left off probably the most elegant form elements and from version 10 takes elements of the operating system.

Only screenshots of older form elements and short comments are listed here. Live forms, CSS code and screenshots of newer browsers are in original pages which you can find in menu on the right.

Element <input type="text">

screenshot: form element input type=text in older browsers

The first row of screenshots shows the size of the element specified by attribute size = "7" and blank space around the element. The second line shows the status of disabled element. "Red" line draws attention to the error type of "disappearing text cursor", and the elimination of that error in the "green" row. In addition, you can see the effect of background property which switch the appearance to classic view. The last line is example of underssed element, suitable for insertion into the envelope with look according to designer.

Element <textarea>

screenshot: form element textarea in older browsers

Size of the element textarea specified by attributes cols and rows do not unify size across browsers. With the help of width a height properties, proportions are already similar, but not identical because of different default border-width and blank space around the element. Classic look due to background property, rated border, plus removed blank space by float property, unify the dimensions and appearance in browsers. Vertical scroll bar in Opera 9 can not be removed, but a slider can be added to other browsers. Then view is almost the same.

Element <select>

screenshot: form element select in older browsers

Element select without any CSS property is shown in the first row of screenshots. The second row displays element in status disabled and with size defined by width: 92px; height: 22px; CSS properties. "Red" row of screenshots shows the inability to set the color of the border in IE6 and 7. Switch to classic look with help of background property succeeds only in FF and Opera. Removing border of element select in IE6 and IE7 is a bit complicated and is described in article select experiment.

Permanently expanded select element is obtained by utilization of attribute size. Attribute value determines how much lines (option elements) are visible. Height of expanded elements differ across browsers. The last row of screenshots represent interesting combination of expanded element with height set to one line. By that way some browsers create element similar to spinner control. It is not possible to roll out it, but it is possible to select desired option by help of pair buttons up and down, or by help of cursor keys.

Elementy <input type="checkbox">, <input type="radio">

screenshot: form element checkbox a radio button in older browsers

Because these form elements are essentially icons, or images and border is part of that picture, it is not possible to remove the border with help of CSS. Screenshots demonstrate possibility of size modification and how much space these elements occupy.

The first row is the default view, in the second state disabled. In the third row is set background color and different effect of this property. The fourth row has set properties margin: 0; border: 0; padding: 0; no effect in IE6 and IE7 is visible. The last two rows show the effect of dimensions change. Specified size is 20x20 square and 36x24 rectangular.

Element <input type="submit">

screenshot: form element aubmit in older browsers

The first row shows the element input type="submit" without the use of CSS. When attribute disabled is set up, gray button is displayed. Setting size by width and height CSS properties work in all browsers. Change the look to classic type is possible by property background and also work in all browsers.

In the last row of examples are screenshots of element button. Inside of this element both image and text can be inserted. Unfortunately, incorrect attributes processing of this element in IE6 and IE7 limits practical use of element button.

Screenshots of form element <input type="file"> are not listed here.

updated 24.03.2010