Cross Browser input field width stylization

Question

Hi,

I have a shipping/billing input form and I'm having trouble styling the input fields to be the same width...

The Problem:
-a field <input type="text" size="X" /> appears to render with different sizes in different browsers (see link).
-In addition, select fields seem to render on a differently as well.
-Chrome/safari do not seem to respond to the font-size property for select fields.

Any guidance on how to stylize the size of text-input and select fields cross-browser would be oh so very helpful.

Must I result to having a different sytlesheet for each browser... just for these input fields? -thanks

Answer 1

Remove that inline "size" attribute, first. You should use CSS to style the input form:

input[type="text"] {
    width: 100px;

    /* You can also style padding, margins and everything else,
     * just remember that inputs of type "text" can only be one line. 
     */
}

Don't use [type="text"] as a selector. I was just using it in this example to associate with input fields of type "text", but it's not fully cross-browser supported. You should give your text input fields their own class to stylize with.

Also, don't forget your CSS reset to make sure your margins, borders, et. al. are reset for all browsers. http://meyerweb.com/eric/tools/css/reset/