FORM INPUTS TEST

Browser Notes (using Windows XP2)

Internet Explorer 6

1. Although both header rows (shown disabled) have border-style:none specified, only when a border colour is set does the border disappear. (See the W3C CSS2.1 border specs which state that border-style:none equates to No border; the border width is zero. Setting border:0 works.)

2. The top row of headers have a grey border inside the outer border. This appears to be present in unstyled inputs as well, as an invisible white inner border, as something is adding to the width. Inputs with a border colour set are shorter as if this inner border has been removed. (It can't be padding as this is set to zero.) This is demonstrated by the last row.

3. The Submit button shows enlarged graphics (as if it were zoomed in) when the font size added to the input exceeds 14px.

Firefox 1.5 RC3 (Gecko 1.8)

1. Inputs appear to have a hidden inner border, like Explorer, which is removed by adding a border style, or turning the outer border off. This makes the second row wider than the fourth.

Opera 8.5

1. Borders appear to be drawn inside the inputs, leading to a 2-pixel shorter width. What I also found was that setting the left or right borders on disabled inputs that have no borders set did not add to the width of the input. Instead, the content is shifted inwards. However, when a top or bottom border is set, the input extends in height accordingly.

2. Opera 8.5 only adds padding to the top and bottom of an input.

3. Opera 8.5 is the only browser to align all the rows precisely. However, this behaviour has changed in Opera 9.

Opera 9.0 Preview 1

1. The width of disabled and non-disabled inputs no longer matches! The output is similar to that of Firefox, whereby the second and fourth rows jut out, the second row more than the fourth. Again, this is probably due to the outer border destroying the invisible inner border.

2. Adding a left or right border to disabled inputs extends the width, unlike in Opera 8.5.

3. Padding affects the left and right of an input, as well as the top and bottom, unlike Opera 8.5, which ignores the left and right.

A Cross-browser Solution?

There is only one way I've found to get the widths of both disabled and non-disabled inputs to match across the main browsers tested above. That is to give both types of input a border colour. Annoyingly this means losing the default colour used around inputs. There isn't an identical colour I could see listed using Eric Meyer's CSS test for User preferences for colors, which generates the correct colours based on the operating system's current theme. And if you didn't want a border visible around a disabled input, you'd have to add one that matched the page background, though the input would appear shorter. Its actual length would still match a non-disabled input. Or you could use a border colour that matched the background colour of the input, which would then make it look as if there were no border used at all.

Credits

By Christopher Hester 18 November 2005 · Last updated 19 November 2005.