Cross Browser input field width stylization - input

Question

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/

Answer 2

Nowadays, it's possible to normalize the width of "sized" inputs, using the ch unit, which has reached a decent browser support.
Unfortunately, it's still not possible to write:
input[size] {
width: attr(size) "ch";
}
So we have to style the widths we know we'll be using:
input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */
This can easily be automated using a CSS preprocessor.
UPDATE:
I made a test fiddle. As of today (feb. 2018), this is working on Windows 10 with Chrome 63, Edge 41, FF 58. On IE 11, it fails. I haven't tried on OS X.