CSS textarea widths differ from input widths in firefox

Question

I am setting the width of my text input's and text area using css:

input[type=text], 
input[type=file],
textarea {
    width: 305px;
}

For some reason in firefox the textarea width appears shorter:

Works fine in safari and chrome. How can I fix this?

Solution:

As explained here: Unable to set textarea width with CSS adding:

padding: 0;
border: 1px solid #ccc;

does the trick.

Answer 1

I believe this is because the input tags and textarea tags have a different border by default. Try adding a border to your CSS to achieve the same widths.

input[type=text],
input[type=file],
textarea {
    width: 305px;
    border: 1px solid black;
}

Here's an example: http://jsfiddle.net/Das2q/