Styling HTML Form Element with CSS

The HTML Form Element is, by design, left to the browser implementation. Thus, creating an exact replica of a form that works in all browser and sizes is a nightmare. It is possible though, to make some standardization to the form element using CSS styling techniques. Not perfect, but it gets the job done.

An article on Smashing Magazine, “The Problem Of CSS Form Elements” describes techniques that can be used to create standard form style that works on most browsers. Some techniques used are:

  • Defining Dimensions
  • Alignment
  • The Strange Case Of File Inputs

It does not cover everything, but enough to get the basic form to somehow looks the same on most browsers.