How to make styling and functioning of form elements get not to break in all browsers?

Question

How to make styling and functioning of form elements identical in all browsers?

<form> </form>
<fieldset> </fieldset>
<legend> </legend>      
<button> </button>
<label> </label>
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select> </select>
<option> </option> 
<textarea> </textarea>
<optgroup> </optgroup>

These are all form elements which are supported in XHTML and HTML.

My question is not about to make vertical or horizonal form. I'm asking, should we write any default CSS for every form element to make identical in all browser. No matter where and how I place them.

This is for form elements in Eric Meyer reset:

fieldset, form, label, legend
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

YUI CSS reset also adds this:

input,textarea{ margin:0; padding:0; }

Like I found this JavaScript fix: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Does anyone know any other tips?

Answer 1

Cross-browser compatibility doesn't usually present a problem for form elements. It is maddening in margin/padding handling (or used to be) and with other idiosyncratic elements (e.g. Netscape's old "Layers" tag) but not really with forms. Is there a specific problem you are running into?

Answer 2

Different operating systems style <button /> and <input type="submit" /> differently (i.e. on Mac OSX, submit buttons are rounded-cornered, aqua-colored pill shapes. On a Windows machine, buttons are box-shaped with a one-pixel inset/outset border on them. CSS could force the appearance of the Windows-style button, but likely can't perfectly emulate the OSX button until CSS3 border-image attribute gets fully-supported. If a Mac client gets CSS style information for a <button /> element, it will revert to styling it like a DIV, so you can make it look like a Windows-style button, but is that your goal?

Other than that, there could be a CSS reset for the other input fields' margin, border, and font treatment, but you'd need support for some advanced selectors since <input type="submit" /> submit buttons will fall in with the other text-based <input /> fields (which look radically different than a button), so you'd be needing two CSS statements, probably like:

input { border:solid 1px black; padding:0.25em; }
input[type="submit"] { border: outset 1px black; background-color:"#CCC"; padding:0.5em 1em; }

Browsers that don't support attribute selectors (IE6!) wouldn't apply the CSS correctly.

Answer 3

Eric Meyers is a good place to start. I've found that adding classes to certain elements (checkbox, etc.) helps me a lot (IE6 problem mentioned above). The best thing you can do (or at least that I ever did) is to just take the time to do a little reading, work out a cross-browser solution you are happy with and understand, and use it over and over again.

Answer 4

Making things look identical in all browsers isn't necessary - the main objective is to get things not to break in other browsers. There are certain things in different browsers that you will not be able to make "identical" no matter what, and certain form elements are one of those things. The worst of them is the file upload button, which requires way too much tweakery for what it represents to truly customise it.

First, select just the browsers you believe your users will have and focus on those. Usually, it'll be something like (Firefox, IE8/IE7/IE6, Chrome, Safari, Opera). The rest you may be able to ignore completely. If you have an existing site, look at your Google Analytics visitors' browser profile and just make a cold decision about what you want to support. In some cases, you may even be able to cut out IE6 completely which will make your design life so much easier.

Then, what I personally do is that I'll design in Firefox, try to write clean simple code, and once ready, start looking at the design in different browsers (which I have installed on different machines, laptop, etc) and tweak things as necessary. "Identical" is never my objective, just "functional" and "good-looking".

Hope that helps.

Answer 5

Form elements won’t be identical in all browsers. Browsers can pretty much render form elements however they want, and the major browsers currently render them quite differently.

It’s a bit involved, but Eric Meyer’s article Formal Weirdness highlights the complexity.