Instead of using CSS resets, I use Normalize.css, and I usually style an HTML
form's containing elements such as
textarea, etc. to the fullest extent. To make sure that the form's design is closely consistent with the overall website's design.
But with UX in mind — both for mobile and desktop — should we instead let browsers dictate certain styles in web forms?
For example, consider the elements
textarea — what if we were to avoid setting:
- Border, background, padding, line-height, font, border when selected, etc.
I have created an example demo here, which you can try on different browsers.
On Mac OS X Lion, the WebKit browsers render the form similarly.
And here's Chrome:
But Firefox already does things a little different — see button, and text area:
And so does Opera — see button:
And that's just the tip of the ice berg, not even taking mobile, and older browsers on various operating systems into account, whose default styles for form appearance will be drastically different.
What do users prefer and expect?
- Do they want the input fields, borders around selected inputs, buttons, and so on, to be consistent with the design?
- Or do they want websites to be more consistent with their operating system (e.g. buttons, selected fields, spacing)?