This is a continuation of the article in part 1.
File Input Fields
File inputs are particularly weird. They are immune to the box-sizing property which means they are stuck on the border-box display model (or padding-box in the case of Safari and Chrome). As you can see from the image, they render inconsistently in different browsers. Firefox, Opera, and Internet Explorer will show a text field with the name of the selected file and a button to the right. In Safari and Chrome the file input has a button on the left and a text label displaying the name of the selected file on the right.
Setting the height property will have an effect, but if it is too small you may observe some inconsistent behavior among browsers. The bottom of the button may get clipped in Safari and Chrome, or the lower part of the button text in the other browsers (except for Opera—there the text will overflow the button). The lower part of the text inside the label or the text field will also get clipped (except for Firefox, where the whole text field will get clipped). In order to fix this, you can set a smaller font-size, so it will match the thinner controls.
Setting the width might also become troublesome for smaller values. Opera and IE will make the text field narrower, while Safari and Chrome will introduce an ellipsis (…) in the middle of the shortened label text. And what about Firefox? Well, here is the funny part—Firefox will not alter the width of the controls (the only thing which can indirectly affect it is the font-size). Changing the width will modify the flow though, which means that the button inside the file input will visually overflow the input’s layout box. That same button will probably go partially under the next element on the right, and not even an overflow:hidden; style can prevent this. The bottom line is that you must always test how your file inputs look in Firefox, just to be on the safe side. I also remember that some older Opera browsers used to support the color property, but not the background-color. For that reason, I am a little cautious when giving my file inputs a light-colored text on a dark background.
Option Fields
You can actually style OPTION elements to a certain varying degree in different web browsers. All of them will render the colors you specify (color and background-color). However, CSS positioning does not apply and no browsers respect the line-height property. Also, only Firefox will display the other font properties you might want to set. In fact, Firefox is the only browser which supports the rest of the CSS properties for these elements. On the other hand, Internet Explorer is the only browser known to me, which will display the colors of a selected OPTION (when it is displayed inside the SELECT element’s box, as opposed to inside its drop-down list). You should also be aware, that modifying the size of an OPTION (using dimensions, padding, font-size, etc.) in Firefox, will affect the layout of the enclosing SELECT element. Unless you set its dimensions, it will expand to fit the largest OPTION it contains.
HTML5 Form Controls
While the new controls which come with HTML5 are very nice and useful, the browser support for them can be spotty. The good part is unsupported controls will render as text inputs, which means that we can actually put some of them in our markup, without expecting them to necessarily behave in their custom manner. This can allow us to begin using at least the email, search, and url inputs, while providing JavaScript fallbacks for the behavior of the others (like color and datetime). So far, the only one I have to be careful about is the search input, because Webkit browsers which support that input have given it a border-box sizing by default. However, this can be easily remedied by the box-sizing property, and that is reliable because we can know for sure that if the browser supports a new HTML5 input it will definitely also support the box-sizing property. But otherwise, I see no reason not to profit from their semantics, even at the current point in time.
As a conclusion, I can state that styling web forms can get complicated, but it doesn’t have to be. You should always strive to test your websites in as many web browsers as you can afford to, and if you also keep in mind some of the common caveats (and factors like the box-sizing of different controls) you can save yourself a lot of potential frustration if your customers care about details (as they should), and decide to check out the website from a different web browser.
Part 1: Styling Web Forms and the CSS Box Model
Creating good looking forms can be challenging if you don’t understand how the box model will affect your form fields. Alexander continues this information in the first part Styling Web Forms and the CSS Box Model.
